Maison  >  Article  >  interface Web  >  Solution compatible IE pour le filtre de transparence d'opacité

Solution compatible IE pour le filtre de transparence d'opacité

php中世界最好的语言
php中世界最好的语言original
2018-03-22 14:47:262569parcourir

Cette fois, je vous propose une solution compatible IE pour le filtre de transparence d'opacité. Quelles sont les précautions lors de l'utilisation du filtre de transparence d'opacité. Voici un cas pratique, jetons un oeil.

Opacité de la propriété de transparence CSS3Je pense que tout le monde l'a utilisé partout. Quant à la façon de traiter de manière transparente les navigateurs qui ne prennent pas en charge CSS3 et de maintenir des effets de navigateur cohérents, je pense que tout le monde peut l'écrire. Cependant, en ce qui concerne la signification grammaticale spécifique du filtre et les différentes méthodes d'écriture de chaque version, beaucoup de gens ne le font pas. J'ai interrogé de nombreux experts du groupe, mais aucun d'entre eux n'est très précis et les avis sur Internet sont encore plus variés. Aujourd'hui, j'examine principalement cet attribut et effectue des tests réels pour illustrer la méthode d'écriture correcte ainsi que les différences de prise en charge et d'écriture des différentes versions d'IE.

Tout d'abord, l'attribut Opacité permet de définir la transparence d'un élément. La plage de valeurs est comprise entre 0 et 1 et ne peut pas être négative. Une valeur d'opacité de 1 est complètement opaque et une valeur de 0 est complètement transparente et visuellement invisible. Concernant la compatibilité du navigateur avec l'attribut opacity, veuillez continuer à lire :

L'attribut privé -moz-opacity n'est plus pris en charge à partir de Firefox 3.5+. FF l'utilisait avant Mozilla 1.7 (Firefox 0.9). Pour les attributs privés, Firefox 0.9. -Firefox3 prend en charge les attributs -moz-opacity et opacity. Maintenant, je repense à l'époque où je suis entré sur le lieu de travail, juste après la mise à niveau de Firefox vers 3.5, certains des effets de transparence des pages bien conçus ont soudainement disparu. partout, et je déplore la façon dont le temps passe.

IE9+ commence seulement à prendre en charge l'opacité CSS3, et pour IE6-IE8, nous sommes habitués à utiliser l'attribut filter pour l'implémenter. IE4 à IE9 prennent tous en charge la méthode d'écriture de filtre progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8 a introduit le filtre spécial -ms. IE estime que cette méthode d'écriture est une correction de l'ancienne écriture. méthode. , ce qui est plus conforme à la spécification. La valeur d'attribut de cette méthode d'écriture n'a qu'une paire de guillemets et l'effet est le même qu'avant. Cependant, cette méthode d'écriture a une courte durée de vie. Depuis IE10, filter et -ms-filter ne sont plus pris en charge.

Les versions de Safari antérieures à la 1.2 étaient basées sur le noyau du navigateur khtml. Après la sortie de la version 1.2, la méthode d'écriture -khtml-opacity n'était plus prise en charge et -khtml-opacity est devenue une histoire.

Konqueror n'a jamais pris en charge -khtml-opacity, mais prend en charge l'opacité depuis la version 4.0.

En plus d'IE, les navigateurs grand public actuels Opera 9.0+, Safari 1.2 (WebKit 125) +, Chrome, etc. prennent tous en charge l'attribut de transparence d'opacité.

À partir de la version 4.0, IE a fourni des effets de filtre multimédia intégrés. La méthode d'utilisation spécifique est :

Syntaxe :

filtre : filtre

Paramètres :

filtre : L'effet de filtre à utiliser. Séparez plusieurs filtres par des espaces.

Instructions :

1. Définissez ou récupérez l'effet de filtre appliqué à l'objet.

2. Pour utiliser cet attribut, l'objet doit avoir l'un des trois attributs : hauteur, largeur,

position.

3. Le mécanisme de filtrage est extensible. Des filtres tiers peuvent être développés et utilisés.

4. Cet attribut n'est pas disponible sur la plateforme MAC.

5. La fonctionnalité de script correspondante est le filtre.

IE4.0 ou supérieur prend en charge les 14 filtres suivants :

①, Alpha permet aux éléments HTML d'afficher un effet progressif transparent

②, Flou donne aux éléments HTML un effet de flou dû au vent

③, Chroma rend une certaine couleur de l'image transparente

④, DropShadow donne aux éléments HTML une ombre tombante

⑤, FlipH fait retourner l'élément HTML horizontalement

⑥, FlipV fait retourner l'élément HTML verticalement

⑦, Glow crée un effet de halo et de flou autour de l'élément

⑧, Gray Turn une image couleur en noir et blanc

⑨, Inverser Produire l'effet d'un négatif photo de l'image

⑩, Lumière Placer une lumière et une ombre sur l'élément HTML

⑪, Masque Utiliser un autre élément HTML pour générer un masque de l'image sur un autre élément

⑫、Shadow Produit une ombre plus tridimensionnelle

⑬、Wave Faire en sorte que les éléments HTML produisent une déformation d'onde horizontale ou verticale

⑭、XRay Génère le contour des éléments HTML, tout comme c'est le cas comme prendre une radiographie

Explication détaillée des paramètres du filtre Alpha

①, Opacité Le degré d'opacité, pourcentage. De 0 à 100, 0 signifie complètement transparent et 100 signifie complètement opaque.

②. FinishOpacity Il s'agit d'un paramètre sélectif utilisé avec Opacity et FinishOpacity. Lorsque Opacity et FinishOpacity sont utilisés en même temps, un effet transparent et progressif peut être produit, ce qui est plus cool. De 0 à 100, 0 signifie complètement transparent et 100 signifie complètement opaque.

③, Style Lorsque Opacity et finishOpacity sont définis en même temps pour produire un dégradé transparent, il utilise principalement le rouge pour spécifier la forme d'affichage progressive. 0 : aucun gradient ; 1 : gradient linéaire ; 2 : gradient circulaire ;

④. Start >⑦, FinishY La valeur de coordonnée Y de la fin progressive

Ce qui suit est un exemple pour tester la compatibilité du filtre et de l'opacité :

Code HTML

Remarque : Non requis pour les tests. Oubliez d'écrire DOCTYPE, sinon cela s'écartera de l'effet réel.

Code CSS correspondant :

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>
En utilisation, nous pouvons sélectionner la ligne de code dont nous avons besoin parmi ce qui précède en fonction du navigateur/version à adapter. Si vous souhaitez une prise en charge complète de tous les navigateurs, au moins les 5 premières phrases sur l'opacité ou le filtre sont nécessaires. Ce qu'il faut préciser, c'est que si vous souhaitez utiliser filter et -ms-filter en même temps, veuillez écrire -ms-filter devant filter. La description originale est la suivante :

Si vous souhaitez que l'opacité fonctionne également dans le mode émulant IE7 d'IE8, l'ordre doit être :

.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}
Si vous n'utilisez pas cet ordre , IE8 émulant IE7 n'applique pas l'opacité, bien que IE8 et IE7 natifs le fassent.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site php chinois !

Lecture recommandée :
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
filter: alpha(opacity=50); // second

Utiliser transparent pour créer des triangles

Problèmes de compatibilité du navigateur CSS3

Barre de progression de chargement HTML5+CSS3 et implémentation de la barre de progression de téléchargement

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn