> 웹 프론트엔드 > CSS 튜토리얼 > IE 8에 포함된 요소에 영향을 주지 않고 div 배경의 불투명도를 어떻게 설정합니까?

IE 8에 포함된 요소에 영향을 주지 않고 div 배경의 불투명도를 어떻게 설정합니까?

Linda Hamilton
풀어 주다: 2024-11-09 04:13:02
원래의
853명이 탐색했습니다.

How do I set opacity for div backgrounds without affecting contained elements in IE 8?

IE 8에서 포함된 요소를 변경하지 않고 Div 배경의 불투명도를 설정하는 방법

div 요소의 배경에 불투명도를 적용하려고 할 때 IE 8에 포함된 요소에 영향을 주지 않고 다음 방법은 종종 실패:

  • 불투명 CSS 속성 사용: 이는 div와 해당 내용 모두에 영향을 미칩니다.
  • 불투명도가 있는 png 이미지 사용: 이는 동적 솔루션이 아닙니다.

솔루션

대신 불투명도를 위한 알파 채널을 포함하여 배경색을 지정하는 rgba() CSS 함수:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}
로그인 후 복사

IE8 호환성

이전 버전의 IE를 지원하려면 다음을 고려하세요. IE에 rgba 지원을 추가하는 CSS3Pie를 사용합니다. 수정된 스타일시트:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background: rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}
로그인 후 복사

IE 필터의 대체 방법

IE 필터는 그라데이션 키워드와 함께 사용할 수도 있습니다:

.myelement {
    filter: gradient(startColorstr='#990000', endColorstr='#990000', GradientType=0);
    opacity: 0.5;
}
로그인 후 복사

참고 불투명도 값은 IE에서 직접 필터 속성을 통해 지정할 수 없습니다.

위 내용은 IE 8에 포함된 요소에 영향을 주지 않고 div 배경의 불투명도를 어떻게 설정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿