CSS) CSS opacity(불투명도) attribute (cf. rgba 이용)

opacity 속성은 요소의 불투명도를 설정함.

불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대 개념임.

 

 

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다.

따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖는다.

 

opacity: 0.4;

 

-> 자식 요소는 불투명하게 유지하고 싶다면 background 속성을 이용하자!

 

background: rgba(0, 0, 0, 0.4);

 

 

cf> rgba

rgb라는 색상정보에 a는 알파 채널값을 부여하여 투명도를 조정

- 자식 요소를 불투명하게 하고싶을 때는 background 속성의 rgba를 이용해야함.

 

opacity는 자식요소에는 상속되지 않기 때문.

 

opacity: 0.4;           /* 자식요소에는 상속되지 않음 */

background: rgba(0, 0, 0, 0.4);     /* 자식요소도 불투명하게 */

 

 

** opacity 속성의 속성값으로 올 수 있는 value

 

rgba에서 <alpha-value>채널의

불투명도(알파 채널의 값)를 나타내는 0.0 이상 1.0 이하의 숫자

 

0	요소가 완전히 투명해보이지 않음.
0과 1 사이의 아무 <number>	요소가 반투명해 뒤의 내용을 볼 수 있음.
1 (기본값)	요소가 불투명함.

 

 

 

+) :hover 을 이용하면 다른 불투명도를 설정할 수 있음.

 

예제- cr: developer.mozilla.org

 

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}

= 마우스를 올리면 불투명도가 1에서 0.5가 되는 것.

 

 

https://mywebproject.tistory.com/86

html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class)

 

** 가상 클래스

선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.

:hover

링크에 마우스 올릴때

 

 

 

 

---

 

 

caniuse.com/?search=opacity

 

 

 

---

 

REFERENCE

 

REF:https://developer.mozilla.org/ko/docs/Web/CSS/opacity

opacity - CSS: Cascading Style Sheets | MDN