배경 크기 IE8 호환성을 위한 솔루션 예
- 高洛峰원래의
- 2017-03-21 14:58:143532검색
canius(http://caniuse.com/#search=Background-size)에 따르면, 아래 그림과 같이 background-size 호환은 IE9 이상 브라우저에서 가능하다고 합니다.
인스턴스 코드:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>background-size 兼容性处理</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
width: 400px;
height: 400px;
margin: 100px;
border: 1px solid red;
background: url(img/aaa.jpg) no-repeat center center;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>효과:
(1) 크롬 브라우저:
(2) IE8 브라우저:
호환 솔루션:
필터 속성 사용:
.parent {
width: 400px;
height: 400px;
margin: 100px;
border: 1px solid red;
background: url(img/aaa.jpg) no-repeat center center;
background-size: 100% 100%;
/*下一行为关键设置*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');
}IE8 브라우저 효과:
원칙:
필터: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL )
활성화: 선택 사항. 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true: 기본값입니다. 필터가 활성화되었습니다. false: 필터가 비활성화됩니다.
크기 조정 방법: 선택 사항. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방법을 설정하거나 검색합니다. 자르기: 개체 크기에 맞게 이미지를 자릅니다. 이미지: 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다. 배율: 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.
src: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.
위 내용은 배경 크기 IE8 호환성을 위한 솔루션 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.