배경 크기 IE8 호환성을 위한 솔루션 예-CSS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2017-03-21 14:58:14

원래의

3552명이 탐색했습니다.

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