css 투명도 조절하는 방법 - rgba, opacity

css 투명도는 rgba 속성을 사용하면 배경색만 투명하게 할 수 있고 opacity 속성을 사용하면 모든 요소를 투명하게 할 수 있습니다.

 

rgba 속성

 

#one {
        width: 50%;
        height: 50%;
        background-color: rgba(255, 255, 255, 0.5);
}

 

배경색-투명도-적용

 

배경색만 투명하고 글자색은 그대로입니다. rgba의 4번째 값을 통해서 투명도를 조절할 수 있습니다. 값의 범위는 0~1입니다.

 

opacity 속성

 

#two {
        width: 50%;
        height: 50%;
        background-color: yellow;
        opacity: 0.5;
}

 

모든-요소에-투명도-적용

 

배경색과 글자색 모두 투명하게 변경되었습니다. 값의 범위는 0~1입니다.