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%.

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

, 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é

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

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

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

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!