CSS opacity 와 RGBA (배경색만 투명하게 만들기)

css로 투명도를 설정하는 방법과 그 밖의 유용한 Tip 정보를 알려드리기 위해 

늦은 시간을 활용하여 끄적여(?) 보겠습니다.

일반적으로 저는 모를 사항 이었습니다만...

우리가 투명도를 주기 위해서는 CSS의 opacity라는 속성을 사용합니다.

접근성을 고려하여 아래와 같은 순으로 작성합니다.

.box{
    -ms-filter:alpha(opacity=0); /* IE8 */
    filter:alpha(opacity=0); /* IE5 ~ 7 */
    opacity:0; /* IE9+, chrome4.0+, firefox2.0+, safari3.1+, opera9.0+ */
}
 

하지만 위와 같이 작성하여 내가 원하는 곳만 투명하게 작업하기 위해선 불만족스러운 결과를 가져올 수  있습니다.

그 이유는 부모태그에 위와 같은 속성을 적용하면 그 안의 자식 요소까지 투명하게 만들어 버리기 때문 입니다. 말 여러번 해서 모합니까.

소스를 작성해 보겠습니다.

 
<style type="text/css">
    .parent-box{
        -ms-filter:alpha(opacity=0.5);
        filter:alpha(opacity=0.5);
        opacity:0.5;
    }
    .parent-box .child-box{
        font-size:20px;
        font-weight:bold;
        color:blue;
    }
</style>
 
<div class="parent-box">
    <p class="child-box">
        contents text
    </p>
</div>
 

이 소스를 가지고 html로 만들어 브라우저로 확인해 보시면 안의 텍스트까지 반 투명해 지는 것을 확인할 수 있습니다.

근데 전 그런 디자인을 원한것이 아니라 배경만 투명하게 하고 싶다면?? 

다 방법이 있습니다.!!!

배경만 투명하게 하고 싶다면 방법은 2가지가 있습니다.

1. 반투명한 png 이미지 파일을 만들어 배경이미지로 적용한다.

2. RGBA속성값을 이용하여 배경만 투명하게 만든다.

RGBA속성값은 아래와 같이 적용하면 됩니다.

.box{background-color:rgba( 255, 255, 255, 0.5 );}
 

그럼 선택한 배경이미지만 투명하거나 반투명하게 처리하여 그 안에 포함되는 자식요소들은 원래의 색상으로 표현 될 것 입니다.

기타 새로운 사항이나 잘 못된 부분이 있으면 수정하여 올리도록 하겠습니다.