opacity 속성은 요소의 불투명도 / 투명도를 지정합니다.

투명한 이미지 

불투명도 속성은 0.0 - 1.0의 값을 가질 수 있습니다. 값이 낮을수록 투명합니다.

** IE8 및 이전 버전에서는 filter : alpha (opacity = x)를 사용합니다.

** x는 0 - 100의 값을 취할 수 있습니다. 값이 낮을수록 요소가 더 투명 해집니다.

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

투명한 호버 효과 

불투명도 속성은 종종 마우스 오버시 불투명도를 변경하기 위해 :hover 선택기와 함께 사용됩니다.

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

코드 설명 

첫 번째 CSS 블록은 예제 1의 코드와 유사합니다. 또한 사용자가 이미지 중 하나를 가리키면 어떻게 될지 추가했습니다.

이 경우 사용자가 이미지를 가리킬 때 이미지가 투명하게 보이지 않도록해야합니다. 이 CSS는 opacity : 1 입니다.

마우스 포인터가 이미지에서 멀어지면 이미지가 다시 투명 해집니다.

역전 호버 효과의 예 :

img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

투명한 상자 

opacity 속성을 사용하여 요소의 배경에 투명도를 추가 할 때 모든 자식 요소는 동일한 투명도를 상속합니다.

이렇게 하면 완전히 투명한 요소 내부의 텍스트를 읽기 어려울 수 있습니다.

div {
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
}

RGBA를 사용한 투명도 

위의 예와 같이 자식 요소에 불투명도를 적용하지 않으려면 RGBA 색상 값을 사용하십시오.

다음 예제에서는 텍스트가 아닌 배경색의 불투명도를 설정합니다.

CSS 색상 장에서 RGB를 색상 값으로 사용할 수 있다는 것을 배웠습니다.

RGB 외에도 색상의 불투명도를 지정하는 알파 채널 (RGBA)과 함께 RGB 색상 값을 사용할 수 있습니다.

RGBA 색상 값은 rgba (빨강, 녹색, 파랑, 알파)로 지정됩니다. 알파 매개 변수는 0.0 (완전 투명)과 1.0 (완전 불투명) 사이의 숫자입니다.

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}