CSS Opacity / Transparency

요소의 불투명도, 투명도를 지정한다.

transparent image

0.0에서 1.0 사이의 값을 가진다. 값이 낮을수록 더 투명하다.

예시

transparent hover effect

마우스를 갖다 대면 불투명도를 바꾸기 위해 :hover 선택자와 종종 같이 쓰인다.

예시

transparent box

요소의 배경에 투명도를 추가하기 위해 opacity속성을 사용할 때, 이것의 모든 자식 요소들은 같은 투명도를 상속받는다. 완전히 투명한 요소 안에 있는 글자를 읽기 힘들게 만들 수 있다.

예시

transparency using RGBA

자식 요소들에 불투명도를 적용하기 싫다면, RGBA 색 값을 쓰면 된다. 다음 예시는 배경색에 불투명도를 설정하고 텍스트에는 안한다.

예시

rgba(red, green, blue, alpha) 알파는 0.0(완전 투명)에서 1.0(완전 불투명)사이의 값을 갖는다.

text in transparent box

투명한 상자 안에 위치된 텍스트

예시

https://www.w3schools.com/css/css_image_transparency.asp