====== CSS Opacity / Transparency ====== * description : CSS Opacity / Transparency * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 \\ ''%%opacity%%'' 속성은 요소의 불투명도 / 투명도 (opacity / Transparency)를 지정합니다.\\ \\ =====Transparent Image===== ''%%opacity%%'' 속성은 0.0 ~ 1.0 사이의 값을 가질 수 있습니다. 값이 낮을수록, 더 투명합니다.\\ ====예제==== {{:wiki:css:css_note:imagetransparency.png?600|}}\\

Image Transparency

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


Image with 20% opacity:

Forest

Image with 50% opacity:

Forest

Image with 100% opacity:

Forest
\\ =====Transparent Hover Effect===== ''%%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:


Forest Mountains Italy
===Result=== {{:wiki:css:css_note:mouseoverimagetransparency.png?600|}}\\ \\ 반전된 호버 효과의 예제:\\ ====예제====

Image Transparency

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


Forest Mountains Italy
===Result==== {{:wiki:css:css_note:reversedhover.png?600|}}\\ =====Transparent Box===== ''%%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:

opacity 0.1

opacity 0.3

opacity 0.6

opacity 1 (default)

===result=== {{:wiki:css:css_note:transparentbox.png?600|}} =====Transparency using RGBA===== 위의 예와 같이 하위 요소에 불투명도를 적용하지 않으려면 **RGBA** 색상 값을 사용하십시오.\\ 다음 예제에서는 텍스트가 아닌 배경색의 불투명도를 설정합니다.\\ \\ RGB 외에도 색상의 불투명도를 지정하는 알파 채널 (RGBA)과 함께 RGB 색상 값을 사용할 수 있습니다.\\ \\ RGBA 색상 값은 rgba (red, green, blue, alpha)로 지정됩니다.\\ 알파 매개 변수는 0.0 (완전 투명)에서 1.0 (완전 불투명) 사이의 숫자입니다.\\ ====예제====

Transparent Box

With opacity

10% opacity

30% opacity

60% opacity

opacity 1

With RGBA color values:

10% opacity

30% opacity

60% opacity

default

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

=====Text in Transparent Box===== {{:wiki:css:css_note:transbox.png?600|}}\\

This is some text that is placed in the transparent box.

====예제 설명==== 먼저, 배경 이미지와 테두리가 있는 %%
%% 요소 (class="background")를 만듭니다.\\ \\ 그런 다음, 첫 번째 %%
%% 안에 또 다른
(class = "transbox")를 만듭니다.\\ \\ %%
%%에는 배경색과 테두리가 있습니다. div는 투명합니다.\\ \\ 투명한
내부의

요소 안에 텍스트를 추가합니다.\\ \\ {{tag>오션 CSS Opacity, Transparency}}