CSS 투명도 설정, 색상값

요소의 투명도를 설정하려면 opacity를 이용하는 방법과 알파채널을 이용하는 방법이 있다.

Opacity

E { opacity : number; }

opacity를 이용하면 자식 요소에도 모두 투명도가 적용되기 때문에, 의도와 다른 결과가 나오는 경우가 많다.

각 브라우저별 정의

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 */
 
filter: alpha(opacity=70); /* IE 5-7 */
 
-moz-opacity: 0.7;  /* Netscape */
 
-khtml-opacity: 0.7;  /* Safari 1.x */
 
opacity: 0.7;  /* Good browsers */

---

Alpha Channel

E { color: rgba(red, green, blue, alpha); }

알파채널은 색상값에 알파값을 추가하여 지정하는 것으로, 자식 요소에 영향을 미치지 않는다.
하얀색에 투명도 50%를 설정시  color: rob(255, 255, 0, 5);와 같이 지정할 수 있다.

RGBA 호환성 대비 코드

E {
    color: #F00;/* RGBA를 지원하지 않는 브라우저는 이걸 적용한다 */
    color: rbga(255,0,0,0.75);
}

알파채널을 지원하지 않는 경우를 대비하여 상위에 일반 색상값을 지정해준다.

참고사항

• border에 rgba를 사용하여 투명도를 준 경우, webkit 브라우저에서는 모서리 겹침 현상이 나타난다.
• hsla 값도 있다 :   E { color: hsla(hue,saturation,lightness,alpha); }

색상값

currentColor

색상값으로 currentColor를 사용할 수 있다.

<p class="type1">type1 <em>emphasis</em></p>
<p class="type2">type2 <em>emphasis</em></p>

p.type1 { color:red;background:black; }
p.type2 { color:blue; }
p em {border-bottom:1px solid currentColor;}

이와 같이 각 em에 외곽선 색상을 일일히 지정하지 않고, 현재 부모에게 적용된 색상을 사용할 수 있다.

Appearance

사용자의 환경에 사용된 색상을 사용할 수 있다.

/* CSS2 */
button { background-color: ButtonFace; }
 
/* CSS3 */
E { appearance : keyword ;  } 
/* keyword : button, radio-button, password  */
 
p.button { appearance : button; }
p.button2 { appearance : none ; }

*  IE 지원하지 않음