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

opacity 속성은 0.0 ~ 1.0 사이의 값을 가질 수 있습니다. 값이 낮을수록, 더 투명합니다.

Image Transparency

The opacity property specifies the Transparency of an element. The lower the value, the more transparent:

Image with 20% opacity:

Image with 50% opacity:

Image with 100% opacity:

opacity 속성은 종종 :hover 셀렉터와 함께 쓰여 마우스 오버 시(on mouse-over) 불투명도를 변경합니다.

Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

반전된 호버 효과의 예제:

Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

opacity 속성을 사용하여 요소의 배경에 투명도를 추가하면, 모든 자식 요소가 동일한 투명도를 상속합니다.
이로 인해 완전히 투명한 요소 내부의 텍스트를 읽기가 어려울 수 있습니다.

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements become trasnparent as well. This can make the text inside a fully transparent element hard to read:

위의 예와 같이 하위 요소에 불투명도를 적용하지 않으려면 RGBA 색상 값을 사용하십시오.
다음 예제에서는 텍스트가 아닌 배경색의 불투명도를 설정합니다.

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

RGBA 색상 값은 rgba (red, green, blue, alpha)로 지정됩니다.
알파 매개 변수는 0.0 (완전 투명)에서 1.0 (완전 불투명) 사이의 숫자입니다.

Transparent Box

With opacity

With RGBA color values:

Notice how the text gets happened as well as the background color when using the opacity property.

먼저, 배경 이미지와 테두리가 있는 <div> 요소 (class=“background”)를 만듭니다.

그런 다음, 첫 번째 <div> 안에 또 다른 <div> (class = “transbox”)를 만듭니다.

<div class="transbox">에는 배경색과 테두리가 있습니다. div는 투명합니다.

투명한 <div> 내부의 <p> 요소 안에 텍스트를 추가합니다.