So verwenden Sie CSS, um das Bild grau zu machen, wenn die Maus darüber fährt

Einen solchen Effekt sehen wir oft auf Webseiten, wenn Sie mit der Maus über das Bild fahren. Dies liegt tatsächlich daran, dass das Bild per CSS auf halbtransparent eingestellt ist . Lassen Sie mich Ihnen ein Beispiel geben, um zu sehen, wie dieser Effekt erzielt wird. Dieser CSS-Code setzt das Bild (img) im Hyperlink, wenn sich die Maus zu A

Hyperlink Bietet einen durchscheinenden Displayeffekt von 80 %.

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

Erklärung: Filter legt den transparenten Effektstil der Plattform IE fest. Der Wert ist 1-100. Je kleiner der Wert, desto transparenter ist er. Um die Transparenz vor IE8 festzulegen, verwenden Sie

Deckkraft, um den Transparenzeffektstil des IE festzulegen, Wert 0,1-1, je kleiner der Wert, desto transparenter, verwenden Sie

-. moz-opacity. Für Nicht-

IE-Browser

-Einstellungen, wie Firefox, ist die Syntax dieselbe wie IE

Diese Einstellung der CSS-Stil-Deckkraft und des Filters wird in IE6 nicht unterstützt. Da der Anteil der IE6-Version stark zurückgegangen ist, wird die Unterstützung dieses CSS durch IE6 im Allgemeinen nicht berücksichtigt. Bewegen Sie die Maus, wenn das Bild seine Farbe ändert und das Bild durchscheinend ist. Beispiel

Beispielfallbeschreibung: Richten Sie zwei DIV-Boxen ein, fügen Sie in jedes der beiden Boxen ein Bild ein und legen Sie fest Bewegen Sie die Maus darüber ( :hover), die Bildtransluzenz beträgt 80 % und 70 % und beobachten Sie den Effekt.

1. Schlüssel-CSS-Code

Hier ist die Hover-

Pseudoklasse

Halbsatz für das Bild im Hyperlink im DIV

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

Objekt

Box Transparenzeffekt. 2. Schlüssel-HTML-Code

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

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

Gemeinsame Möglichkeiten, native JS zu organisieren

So verwenden Sie Vue+CSS3, um interaktive Effekte zu erstellen

Detaillierte Erläuterung des responsiven Frontend-Layouts, der responsiven Bilder und des selbst erstellten Rastersystems

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um das Bild grau zu machen, wenn die Maus darüber fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!