background에만 opacity적용하기

나만 그런지 모르겠지만, 특정 영역에 투명도를 줄때 요소 css에 opacity속성으로 주는 편이다.

그러다보니 그 요소 안에 들어있는 모든 요소들에 투명도가 적용되어, 또 다시 투명도가 필요없는 요소에 opacity나 z-index를 적용시키는 불필요한 작업을 하게된다.

그러다가 background속성에서 투명도를 조절할 수 없을까하는 생각을 갖게되었고, 바로 구글링을 하였다.

그런데...역시...가능했다.

/* header {background-color:rgba(R, G, B, Opacity);} */
header {background-color:rgba(170, 204, 203, 0.9);}

RGB값으로 넣어주고, 뒤에 opacity 값을 넣어주면 해결, 물론 이것도 IE 9이상 버전에서만 적용된다.

그런데 보통 우린 HEX값에 익숙하므로, 

난 HEX값을 RGB값으로 변환해주는 사이트를 이용한다. 아니면 포토샵에서 얻으면 될듯 ㅎ

Convert hex color code to RGB and RGB to HEX Site

http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php