Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html;charset=UTF-8" />
<title>Maskenebene</title>
</Kopf>
<style type="text/css">
*{Rand:0;Padding: 0;}
ul{margin:100px auto 0; width:200px;}
img{border: 0 none;}
li{Hintergrundfarbe:#555;Listenstil: keine; Breite: 146px; Höhe: 220px;}
a:hover{Deckkraft: 0,6;}
</Stil>
<Text>
<ul>
<li><a href=""><img src="upload/2022/web/64380cd7912397dd9e0581b65982b2b7d0a28707.jpg" alt="" /></a></li>
</ul>
</body>
</html>

Prinzip : Fügen Sie li einen Hintergrund hinzu, die Größe von li entspricht der Größe des Bildes, und ändern Sie die Transparenz von a, wenn a:hover

So verwenden Sie den Linux-Befehl nl

Artikel

Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.

Detailliertes Tutorial zur Installation verschiedener (zwei) Versionen der MySQL-Datenbank unter Windows

So verwenden Sie den Linux-Befehl nl

Vue implementiert das Hinzufügen eines Wasserzeicheneffekts zur Seite

Eine kurze Diskussion über die Verwendung virtueller Listen zur Optimierung von Tabellen in el-table

MySQL 8.0.18 Hash Join unterstützt keine Links-/Rechts-Joins. Probleme mit Links- und Rechts-Joins

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

Blog-Design Webdesign-Debüt

In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.

Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung

Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)

Artikel empfehlen

XHTML-Einführungstutorial: Anwendung von Tabellen-Tags

So installieren und ändern Sie das Anfangskennwort von mysql5.7.18 unter Centos7.3

Detaillierte Erklärung der nmcli-Verwendung in CentOS8

Probleme und Lösungen beim Ersetzen von Oracle durch MySQL

.NETCore Docker implementiert Containerisierung und privates Image-Repository-Management

Zusammenfassung der allgemeinen Funktionen von regulären Ausdrücken in PostgreSQL

Beispielcode zur Implementierung eines gestapelten Karusselleffekts mit HTML+CSS+JS

JavaScript-Code zum Erzielen eines einfachen Kalendereffekts

So verwenden Sie Webstorm und Chrome zum Debuggen von Vue-Projekten

wget lädt die gesamte Website (das gesamte Unterverzeichnis) oder ein bestimmtes Verzeichnis herunter

Detaillierte Erklärung der sieben Datentypen in JavaScript

Detaillierte Erklärung zum Erstellen einer MySQL-Master-Slave-Umgebung mit Docker

Vue+Bootstrap realisiert ein einfaches Studentenverwaltungssystem

Detaillierte Erklärung der Unterschiede zwischen ähnlichen Tags und Attributen in HTML

Beispiel für die Anzeige eines Standardbilds, wenn in HTML kein Bild vorhanden ist