Erster Blick auf die Wirkung: Wenn die Maus über das Bild bewegt wird, fügen Sie Schatteneffekt + Text/Symbol hinzu Der Schlüssel zur Implementierung sind CSS- Deckkraft und Hover . Dieser Artikel stellt auch hauptsächlich die Implementierung der Maskenebene vor. <div Klasse="img_div"> <img src="item.image_base64" @click="deleteImg" class="imgCSS"> <div Klasse="Maske"> <h3><Symboltyp="ios-trash-outline" Größe="40"></Symbol></h3> </div> </div> CSS: [Einige Codes gelöscht, die nichts mit der Implementierung des obigen Bildes zu tun haben] Ich glaube der Schlüsselcode ist Es sollte darauf hingewiesen werden, dass der Zweck von pointer-events:none darin besteht, das Problem zu lösen, dass bei einer absoluten Positionierung der Maskenebene ein Klicken auf das Bild kein Ereignis auslösen kann, wie beispielsweise das deleteImg-Ereignis im Code. .img_div { Rahmenradius: 10px; Anzeige: Block; Position: relativ; } .imgCSS { Höhe: 100%; Breite: 100 %; Rahmenradius: 10px; Anzeige: Block; Cursor: Zeiger; } .Maske { Position: absolut; Hintergrund: rgba(101, 101, 101, 0,6); Farbe: #ffffff; Deckkraft: 0; oben: 0; rechts: 0; Breite: 100 %; Höhe: 100%; Rahmenradius: 10px; Zeigerereignisse: keine; } .mask h3 { Textausrichtung: zentriert; oberer Rand: 25 %; } .img_div:hover .mask { Deckkraft: 1; } Dies ist das Ende dieses Artikels über die Implementierung des CSS-Maskenebeneneffekts, wenn die Maus über ein Bild fährt. Weitere relevante CSS-Inhalte zur Bildmaskenebene beim Überfahren mit der Maus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen
>>: Installieren Sie Linux mithilfe einer virtuellen VMware-Maschine (CentOS7-Image).
Inhaltsverzeichnis MySQL-Mehrversionen-Parallelit...
Wir verwenden animierte CSS3-Übergänge, um einen ...
Die Implementierungsmethode gliedert sich in drei...
Ich weiß nicht warum, aber UI gestaltet gerne Wab...
Inhaltsverzeichnis 1. Einleitung 2. Über vue-simp...
Docker-Lernen https://www.cnblogs.com/poloyy/p/15...
<br />Nachfolgend sind die Probleme aufgefüh...
Die Standardanzahl von Remotedesktopverbindungen ...
nohup-Befehl Bei der Verwendung von Unix/Linux mö...
CSS-Viewport-Einheiten gibt es schon seit einigen...
Warum Vim lernen? Linux verfügt über eine große A...
Das HTML-Spezifikationsdokument führt das Crossor...
Inhaltsverzeichnis Vorwort 1. Props, $emit Einweg...
einführen In einem verteilten System ist die vert...