Utilisation de l'opacité transparente CSS et du filtre de filtre de transparence IE dans différentes versions

L'attribut de transparence CSS3, opacité, doit être utilisé partout par tout le monde. Quant à la façon de gérer la transparence dans les navigateurs qui ne prennent pas en charge CSS3 et de maintenir la cohérence de l'effet du navigateur, cet article présente principalement l'explication détaillée de l'opacité transparente CSS et l'utilisation la plus précise du filtre de transparence de chaque version d'IE. intéressés peuvent en savoir plus.

Opacité de l'attribut de transparence CSS3Je crois 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 de l'histoire ancienne.

Konqueror n'a jamais pris en charge -khtml-opacity et 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 : filter

Paramètres :

filter : 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 et 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

⑫, Ombre Produire une ombre plus tridimensionnelle

⑬, Vague Laisser l'élément HTML produire une ombre horizontale Ou déformation des ondes dans le sens vertical

⑭, XRay produit le contour des éléments HTML, tout comme la prise de rayons X

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 : N'oubliez pas d'écrire DOCTYPE lors du test, 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, on peut choisir parmi ce qui précède en fonction du navigateur/version à adapter. lignes de code requises. 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 natif le fassent.

Ce qui précède représente l'intégralité du contenu de cet article, j'espère que ce sera le cas. être utile à l'étude de chacun. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

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

Recommandations associées :

Introduction à l'utilisation de l'attribut de positionnement position tel que fixé dans CSS

CSS utilise la technologie Sprites pour réaliser des cercles L'effet des coins

Introduction à l'utilisation des propriétés d'animation Transition et Animation en CSS3

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!