Beispiel einer Lösung für die IE8-Kompatibilität mit Hintergrundgröße-CSS-Tutorial-php.cn

Beispiel einer Lösung für die IE8-Kompatibilität mit Hintergrundgröße

高洛峰

Freigeben： 2017-03-21 14:58:14

Original

3536 Leute haben es durchsucht

Laut canius (http://caniuse.com/#search=background-size) ist die Kompatibilität der Hintergrundgröße mit Browsern ab IE9 und höher gewährleistet, wie in der Abbildung unten dargestellt.

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

Beispielcode:

<!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>

Nach dem Login kopieren

Effekt:

(1) Chrome-Browser:

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

(2) IE8-Browser:

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

Kompatibilitätslösung:

Filterattribut verwenden:

.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;);
            }

Nach dem Login kopieren

IE8-Browsereffekt:

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

Prinzip:

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

aktiviert: Optional. Boolescher Wert. Legt fest oder ruft ab, ob der Filter aktiv ist. true: Standardwert. Filter aktiviert. false: Filter ist deaktiviert.

Größenbestimmungsmethode: Optional. Zeichenfolge. Legt fest oder ruft ab, wie das Bild des gefilterten Objekts innerhalb der Grenzen des Objektcontainers angezeigt wird. Zuschneiden: Bild zuschneiden, um es an die Objektgröße anzupassen. Bild: Standardwert. Erhöhen oder verkleinern Sie die Größengrenzen des Objekts, um es an die Abmessungen des Bildes anzupassen. Skalieren: Skalieren Sie das Bild so, dass es in die Größengrenzen des Objekts passt .

src: Erforderlich. Zeichenfolge. Geben Sie das Hintergrundbild mit einer absoluten oder relativen URL-Adresse an. Wenn dieser Parameter weggelassen wird, hat der Filter keine Wirkung.

Das obige ist der detaillierte Inhalt vonBeispiel einer Lösung für die IE8-Kompatibilität mit Hintergrundgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!