Reines CSS, um bei der Textbeschreibung einen halbtransparenten Effekt zu erzielen, wenn die Maus darauf platziert wird (unbedingt für Anfänger lesen)
|
Die Wirkung ist wie folgt:
HTML:
<div Klasse="itemInWorks" >
Hochzeitsplanung
Status: Wird abgeschlossen<br>
Vollstrecker: Zhang San<br>
Frist: 15.03.2020
</div>
</div>CSS:
/*Äußerer Div-Teil*/
.itemInWorks{
Breite: 180px;
Höhe: 130px;
border-radius:5px;/*abgerundete Ecken*/
Schriftgröße: 18px;
Schriftstärke: 600;
Farbe: dunkelgrau;
text-align: center;/*Der Text „Hochzeitsplanung“ wird horizontal zentriert*/
Zeilenhöhe: 50px;/*Der Text „Hochzeitsplanung“ ist vertikal zentriert*/
Hintergrund: URL ('Bild/Werksbild/4.jpg');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 180px 130px;
Box-Shadow: #909090 0px 0px 10px;/*umgebender Schatten*/
/*Das Obige wird nach persönlichen Wünschen angepasst*/
Überlauf: versteckt;
Position: relativ;
}
/*halbtransparenter Teil*/
.itemInWorks .mask{
Höhe: 80px;
Breite: 172px;
Farbe: #f5f1e5;
Zeilenhöhe: 23px;
Textausrichtung: links;
Polsterung links: 8px;
Rahmenradius: 2px 2px 5px 5px;
Schriftgröße: 14px;
Schriftstärke: 300;
/*Das Obige wird nach persönlichen Wünschen angepasst*/
Position: absolut;
top:130px;/*Wenn die Maus nicht losgelassen wird, der Abstand zwischen dem höchsten Punkt des halbtransparenten Teils und der Oberseite des äußeren Divs*/
Hintergrundfarbe: rgba (0,0,0,0,5);/*Transparenz*/
Übergang: oben 0,5 s, Ein-Aus;/*Ändern Sie die obere Eigenschaft, schließen Sie sie in 0,5 Sekunden ab, beginnen Sie langsam und enden Sie langsam*/
}
.itemInWorks:hover .mask{
top:50px ;/*Wenn die Maus oben platziert wird, der Abstand von der Oberseite des äußeren Divs zum höchsten Punkt der Folie*/
}Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<Stil>
.itemInWorks{
Breite: 180px;
Höhe: 130px;
Rahmenradius: 5px;
Schriftgröße: 18px;
Schriftstärke: 600;
Farbe: dunkelgrau;
Textausrichtung: zentriert;
Zeilenhöhe: 50px;
Hintergrund: URL ('Bild/Werksbild/4.jpg');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 180px 130px;
Kastenschatten: #909090 0px 0px 10px;
Überlauf: versteckt;
Position: relativ;
}
/*halbtransparenter Teil*/
.itemInWorks .mask{
Höhe: 80px;
Breite: 172px;
Farbe: #f5f1e5;
Zeilenhöhe: 23px;
Textausrichtung: links;
Polsterung links: 8px;
Rahmenradius: 2px 2px 5px 5px;
Schriftgröße: 14px;
Schriftstärke: 300;
Position: absolut;
oben: 130px;
Hintergrundfarbe: RGBA (0,0,0,0,5);
Übergang: obere 0,5 s leichtes Ein- und Aussteigen;
}
.itemInWorks:hover .mask{
oben: 50px;
}
</Stil>
<Text>
<div Klasse="itemInWorks" >
Hochzeitsplanung
Status: Wird abgeschlossen<br>
Vollstrecker: Zhang San<br>
Frist: 15.03.2020
</div>
</div>
</body>
</html>Zusammenfassen Oben finden Sie eine Einführung des Herausgebers in die reine CSS-Textbeschreibung, wie Sie einen durchscheinenden Effekt erzielen, wenn Sie die Maus auf den Bildschirm bewegen (ein Muss für Anfänger). Ich hoffe, es wird allen helfen! |
<<: So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)
Artikel empfehlen
Teilen Sie 8 CSS-Tools zur Verbesserung des Webdesigns
Wenn das Website-Design bearbeitet oder geändert ...
Detailliertes Grafik- und Text-Tutorial zum Herunterladen, Installieren und Konfigurieren von mysql-5.7.28 unter Windows
Vor kurzem musste ich die Version der MySQL-Daten...
SSM VUE Axios Detaillierte Erklärung
Inhaltsverzeichnis Wie wird das SQL-Protokoll ang...
Analyse der Verwendung von Schleifenanweisungen (WHILE, REPEAT und LOOP) in gespeicherten MySQL-Prozeduren
Dieser Artikel veranschaulicht anhand von Beispie...
Detaillierte Anweisungen zur Installation von SuPHP auf CentOS 7.2
Standardmäßig wird PHP unter CentOS 7 als Apache ...
So lösen Sie das Problem der Zabbix-Überwachung, das aufgrund von PHP-Problemen zu verstümmelten chinesischen Zeichen in der grafischen Benutzeroberfläche führt
Lösen Sie das Problem der verstümmelten chinesisc...
Analyse der vier Transaktionsisolationsstufen in MySQL anhand von Beispielen
Vorwort Um bei Datenbankoperationen die Richtigke...
Das Problem der Einführung der angegebenen Schriftart @font-face in CSS, um mit verschiedenen Browsern kompatibel zu sein
Wenn Sie beim Erstellen einer Webseite eine besti...
Tutorial zur binären Kompilierung und Installation von MySql centos7 unter Linux
// Ich habe einen ganzen Nachmittag für die Insta...
Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL
1. CSV-Datei importieren Verwenden Sie den folgen...
Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen
Inhaltsverzeichnis vite Bauen Konfiguration vite....
Centos7-Startvorgang und Nginx-Startkonfiguration in Systemd
Centos7-Startvorgang: 1.post (Selbsttest beim Ein...
Docker CP kopiert Dateien und gibt den Container ein
Geben Sie den laufenden Container ein # Geben Sie...
Detaillierte Erläuterung der Implementierungsprinzipien von call, apply und bind in JavaScript
Inhaltsverzeichnis Vorwort Anruf Verwendung errei...
Professionelle MySQL-Entwicklungsdesignspezifikationen und SQL-Schreibspezifikationen
Im Prozess der Teamentwicklung ist die Formulieru...