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

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 :

position.

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

⑫、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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>

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

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

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!