"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 텍스트를 불투명하게 유지하면서 배경색을 투명하게 만드는 방법은 무엇입니까?

텍스트를 불투명하게 유지하면서 배경색을 투명하게 만드는 방법은 무엇입니까?

2024년 12월 17일에 게시됨
검색:792

How to Make a Background Color Transparent While Keeping Text Opaque?

텍스트에 영향을 주지 않고 배경 색상의 불투명도

웹 개발 세계에서 투명성을 달성하는 것은 시각적 매력을 강화하고 웹사이트 요소의 기능. 일반적인 요구 사항 중 하나는 포함된 텍스트의 불투명도를 유지하면서 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