집 >웹 프론트엔드 >CSS 튜토리얼 >배경 크기 IE8 호환성을 위한 솔루션 예

배경 크기 IE8 호환성을 위한 솔루션 예

高洛峰원래의: 2017-03-21 14:58:143558검색

canius(http://caniuse.com/#search=Background-size)에 따르면, 아래 그림과 같이 background-size 호환은 IE9 이상 브라우저에서 가능하다고 합니다.

解决background-size IE8兼容方案实例

인스턴스 코드:

<!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) 크롬 브라우저:

解决background-size IE8兼容方案实例

(2) IE8 브라우저:

解决background-size 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=&#39;img/aaa.jpg&#39;,  sizingMethod=&#39;scale&#39;);
            }

IE8 브라우저 효과:

解决background-size IE8兼容方案实例

원칙:

필터: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL )

활성화: 선택 사항. 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true: 기본값입니다. 필터가 활성화되었습니다. false: 필터가 비활성화됩니다.

크기 조정 방법: 선택 사항. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방법을 설정하거나 검색합니다. 자르기: 개체 크기에 맞게 이미지를 자릅니다. 이미지: 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다. 배율: 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.

src: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.

위 내용은 배경 크기 IE8 호환성을 위한 솔루션 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS에서 스크롤 막대 스타일을 설정하는 단계 그림다음 기사：CSS에서 스크롤 막대 스타일을 설정하는 단계 그림