CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.

 

opacity 속성은 요소의 투명도와 불투명도를 명시한다.

 

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

 

투명한 이미지

 

opacity 속성은 0.0 부터 1.0 까지의 값을 가질수 있고, 값이 납아질수록 좀더 투명해진다.

 

Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

 

주의 : 인터넷 익스플로어 8 그리고 이전버전은 filter:alpha(opacity=x)를 사용하라.

x는 0부터 100까지의 값을 가질수 있고,

낮은 값은 요소를 좀더 투명하게 만든다.

 

Transparent Hover Effect

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

 

투명하게 hover 효과

 

opacity 속성은 마우스가 위에 올려졌을때, 투명도를 변경하기 위해서 :hover 선택자와 자주 사용되어진다.

 

Example explained

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

 

 

처음 css block는 예제1의 코드와 비슷하다. 추가적으로, 유저가 이미지중 하나를 마우스 올렸을때 발생되어야만 하는 것을 추가했다.

이번 케이스에서 우리는 유저가 이것의 마우스를 올렸을때, 투명화되지 않을 것을 원한다.

마우스 포인터가 이미지로 부터 벗어날때, 이미지는 다시 투명호 될것이다.

거꾸로된 hover 효과의 예이다.

 

Transparent Box

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

 

투명한 box

요소의 배경의 투명도를 추가하기 위해 opacity 속성을 사용할때, 요소의 모든 자식 요소는 같은 투명도를 상속받는다.

이것은 내부의 텍스트의 투명하게 만들어서 읽기 어려워질 수 있다.

 

 

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

 

만일 너가 자식 요소에 불투명함을 적용하는 것을 원하지 않는다면, 우리의 위의 예처럼, RGBA 색 값을 사용하라.

따라오는 예제는 텍스트가 아닌 배경색의 투명함을 설정한다.

 

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

 

너는 css Color 장에서 RGB 색의 값을 사용하는 것을 배웠다.

추가적으로 알파채널이 추가된 RGB 값을 사용할수 있다. 색의 투명함을 명시하는..

RGBA의 값은 (red,green,blue,alpha)처럼 명시되어진다.

알파 파라미터는 0.0과 1.0사이의 숫자이다.

 

 

First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent. Inside the transparent <div>, we add some text inside a <p> element.

 

처음에 우리는 배경 이미지, 테두리를 가진 <div> 요소를 만들었다.

그런다음 우리는 <div>안에 다른 div를 만들었다.

<div class="transbox"> 는 배경색을 가지고, 테두리를 가지고 투명하다.

div 내부는 우리가 <p> 텍스트를 추가했다.