Exemple de solution pour la compatibilité IE8 en arrière-plan-tutoriel CSS-php.cn

Exemple de solution pour la compatibilité IE8 en arrière-plan

高洛峰

Libérer： 2017-03-21 14:58:14

original

3536 Les gens l'ont consulté

Selon canius (http://caniuse.com/#search=background-size), la compatibilité de la taille d'arrière-plan est celle des navigateurs IE9 et supérieurs, comme le montre la figure ci-dessous.

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

Exemple de code :

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

Copier après la connexion

Effet :

(1) Navigateur Chrome :

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

(2) Navigateur IE8 :

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

Solution de compatibilité :

Utiliser l'attribut de filtre :

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

Copier après la connexion

Effet du navigateur IE8 :

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

Principe :

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

activé : Facultatif. Booléen. Définit ou récupère si le filtre est actif. vrai : valeur par défaut. Filtre activé. false : le filtre est désactivé.

Méthode de dimensionnement : Facultatif. Chaîne. Définit ou récupère la manière dont l'image de l'objet filtré est affichée dans les limites du conteneur d'objets. recadrer : recadrez l'image pour l'adapter à la taille de l'objet. image : valeur par défaut. Augmentez ou diminuez les limites de taille de l'objet pour l'adapter aux dimensions de l'image. échelle : redimensionnez l'image pour qu'elle s'adapte aux limites de taille de l'objet .

src : Obligatoire. Chaîne. Spécifiez l'image d'arrière-plan à l'aide d'une adresse URL absolue ou relative. Si ce paramètre est omis, le filtre n'aura aucun effet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!