CSS에서 요소의 배경색만 투명하게 만들 수 있나요?

CSS 불투명도를 텍스트를 제외한 배경색으로 제한할 수 있나요?

CSS에서 불투명도 속성은 요소의 투명도를 제어합니다. 그러나 텍스트에는 영향을 주지 않고 요소의 배경색에만 불투명도를 적용하려는 상황이 발생할 수 있습니다.

문제:

관찰한 바와 같이 , 단순히 배경 속성에 불투명도를 설정하는 것만으로는 원하는 결과를 얻을 수 없습니다. 효과.

해결책:

원하는 결과를 얻으려면 rgba() 함수를 활용할 수 있습니다. 이 함수를 사용하면 빨간색, 녹색, 파란색, 알파의 네 가지 채널을 통해 요소의 색상과 불투명도를 지정할 수 있습니다.

rgba() 구문은 다음과 같습니다.

rgba(R, G, B, A)

여기서:

• R, G, B는 각각 색상의 빨간색, 녹색, 파란색 구성 요소를 나타냅니다. 이러한 값은 정수 또는 백분율로 지정할 수 있습니다.
• A는 요소의 투명도를 제어하는 ​​알파 채널을 나타냅니다. 값 0은 완전 투명도에 해당하고, 값 1은 완전 불투명도에 해당합니다.

예를 들어 텍스트의 불투명도를 유지하면서 요소의 배경을 부분적으로 투명하게 만들려면 다음을 수행하세요. 다음 코드를 사용하세요.

background: rgba(51, 170, 51, 0.6);

이 코드에서 rgba() 함수는 연한 녹색 배경을 60%로 지정하는 데 사용됩니다. 불투명도. 텍스트 색상은 불투명도 조정에 영향을 받지 않습니다.

2018년 현재 rgba() 구문은 거의 모든 주요 브라우저에서 지원됩니다.

위 내용은 CSS에서 요소의 배경색만 투명하게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!