Comment utiliser CSS pour rendre l'image grise lorsque la souris la survole

Nous constatons souvent un tel effet sur les pages Web. Lorsque votre souris passe sur l'image, l'image devient grise ou sombre. C'est en fait parce que l'image est définie comme semi-transparente par le style CSS. . Laissez-moi vous donner un exemple pour voir comment cet effet est obtenu

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

Ce que fait ce code CSS est de définir l'image (img) dans le lien hypertexte lorsque la souris se déplace vers Alien hypertexte<.> Présente un effet d'affichage translucide de 80%.

Explication :

le filtre définit le style d'effet translucide de la plate-forme IE, la valeur est de 1 à 100, plus la valeur est petite, plus elle est transparente. Pour définir la transparence avant IE8, utilisez <.>

opacité pour définir l'effet semi-transparent d'IE8, valeur 0,1-1, plus la valeur est petite, plus transparente. Pour définir la transparence d'IE8 et des versions ultérieures, utilisez

-. moz-opacity. Pour les paramètres des navigateurs non

IE

, tels que Firefox, la syntaxe est la même que celle d'IECe paramètre d'opacité et de filtre de style CSS n'est pas pris en charge dans IE6. La part de la version IE6 ayant fortement diminué, la prise en charge par IE6 de ce CSS n'est généralement pas prise en compte.

Déplacez la souris lorsque l'image change de couleur et que l'image est translucide. Exemple

Exemple de description de cas : configurez deux boîtes DIV, placez une image dans chacune des deux cases et définissez la. souris pour survoler ( :hover), la translucidité de l'image est de 80 % et 70 %, et observez l'effet.

1. Code CSS clé

Voici le survol

.p1,.p2{ width:500px; margin:20px auto} 
.p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} 
.p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

pseudo-classe

à moitié défini pour l'image dans le lien hypertexte dans le DIVobjet boîte Effet de transparence. 2. Code HTML clé

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

<p>鼠标移动到图片悬停时，图片变色滤镜效果：</p> 
<p class="p1"><a href="#"><img src="images/p-a-bg.png" /></a></p> 
<p class="p2"><a href="#"><img src="images/an.gif" /></a></p>

Lecture connexe :

Façons courantes d'organiser les js natifs

Comment utiliser Vue+CSS3 pour créer des effets interactifs

Explication détaillée de la mise en page réactive frontale, des images réactives et du système de grille créé par vos soins

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!