CSS의 opacity 속성을 이용하여 요소의 전체적인 투명도를 조절할 수 있습니다. 그러나, 이 속성은 자식 요소에도 영향을 미치게 됩니다. 자식 요소를 포함한 배경이나 텍스트 색상의 투명도를 조절하고 싶을 때는 어떻게 해야 할까요?

색상 투명도 조절 필터

CSS에서는 rgba() 함수를 사용하여 색상의 투명도를 조절할 수 있습니다. rgba() 함수는 네 개의 매개변수를 받으며, 마지막 매개변수는 투명도를 나타냅니다. 이 함수를 사용하여 원하는 색상의 투명도를 조절할 수 있습니다.

.element {
  background-color: rgba(255, 0, 0, 0.5); /* 빨간색의 50% 투명도 */
  color: rgba(0, 0, 255, 0.7); /* 파란색의 70% 투명도 */
}

위의 예시에서는 rgba() 함수를 사용하여 배경색과 텍스트 색상의 투명도를 각각 조절하였습니다.

투명도 조절 결과

rgba() 함수를 사용하여 색상의 투명도를 조절하면, 해당 요소의 배경이나 텍스트의 투명도만 조절할 수 있고, 자식 요소에는 영향을 미치지 않습니다. 이를 통해 콘텐츠를 깔때기 레이어와 같이 겹쳐 표현하거나, 반투명한 색상 효과를 쉽게 구현할 수 있습니다.

결론

rgba() 함수를 사용하여 CSS에서 색상의 투명도를 조절할 수 있습니다. 이를 통해 배경이나 텍스트의 투명도를 독립적으로 조절할 수 있으며, 다채로운 디자인 효과를 구현할 수 있습니다.

참고 문헌:

• MDN Web Docs: rgba()