CSS 투명도 설정, 색상값

  • Stack
  • CSS
  • CSS 투명도 설정, 색상값
요소의 투명도를 설정하려면 opacity를 이용하는 방법과 알파채널을 이용하는 방법이 있다.

Opacity

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

각 브라우저별 정의

 


Alpha Channel

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

RGBA 호환성 대비 코드

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

참고사항

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

색상값

currentColor

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

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

Appearance

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

 

*  IE 지원하지 않음

in CSS Tags: alphacoloropacity