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

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

웹 개발 세계에서는 시각적 매력을 향상하고 웹사이트 요소의 기능. 일반적인 요구 사항 중 하나는 포함된 텍스트의 불투명도를 유지하면서 div의 배경에 투명도를 적용하는 것입니다. 이는 특히 브라우저 간 호환성을 보장하는 데 문제가 될 수 있습니다.

rgba 솔루션

가장 효과적이고 널리 지원되는 솔루션은 'RGBA'( 빨간색, 녹색, 파란색, 알파) 속성입니다. 예는 다음과 같습니다.

.alpha60 {
  background-color: rgba(0, 0, 0, 0.6);
}

'rgba' 속성은 배경색과 알파 채널 또는 투명도를 지정합니다. 이 경우 배경은 불투명도 60%의 검정색으로 설정됩니다. 이 접근 방식은 대부분의 최신 브라우저에서 작동합니다.

IE Fallbacks

이전 버전의 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 브라우저 참고 사항

투명성을 보장하려면 '배경: 투명'을 선언하는 것이 중요합니다. IE용 CSS 대체. 이렇게 하면 알파 채널 지원을 사용할 수 없는 경우에도 배경색이 투명하게 유지됩니다.

위 내용은 텍스트를 불투명하게 유지하면서 배경색을 투명하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!