텍스트에 영향을 주지 않고 배경 색상의 불투명도
웹 개발 세계에서 투명성을 달성하는 것은 시각적 매력을 강화하고 웹사이트 요소의 기능. 일반적인 요구 사항 중 하나는 포함된 텍스트의 불투명도를 유지하면서 div의 배경에 투명도를 적용하는 것입니다. 이는 특히 브라우저 간 호환성을 보장하는 데 문제가 될 수 있습니다.
rgba 솔루션
가장 효과적이고 널리 지원되는 솔루션은 'RGBA'( 빨간색, 녹색, 파란색, 알파) 속성입니다. 예는 다음과 같습니다.
.alpha60 { background-color: rgba(0, 0, 0, 0.6); }
'rgba' 속성은 배경색과 알파 채널 또는 투명도를 지정합니다. 이 경우 배경은 불투명도 60%의 검정색으로 설정됩니다. 이 접근 방식은 대부분의 최신 브라우저에서 작동합니다.
IE 대체
이전 버전의 Internet Explorer를 포함하여 브라우저 간 호환성을 달성하려면 추가 CSS 규칙이 필요합니다.
.alpha60 { background-color: rgb(0, 0, 0); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }
'rgb' 속성은 IE의 대체 배경색을 설정하는 반면, 'filter' 및 '-ms-filter' 속성은 버전 5.5~7 및 8에서 각각 투명도를 적용합니다.
IE 브라우저 참고 사항
투명성을 보장하려면 CSS 대체 내에서 '배경: 투명'을 선언하는 것이 중요합니다. 즉. 이렇게 하면 알파 채널 지원을 사용할 수 없는 경우에도 배경색이 투명하게 유지됩니다.
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3