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 중국어 웹사이트의 기타 관련 기사를 참조하세요!