Beispielcode zur Implementierung von Hintergrundtransparenz und undurchsichtigem Text mit CSS3
|
Kürzlich bin ich auf die Anforderung gestoßen, Text mit einem halbtransparenten Hintergrund auf einem Bild anzuzeigen. Der Effekt ist wie unten dargestellt:
Anforderungen.png Nachdem diese Anforderung erkannt wurde, besteht die erste Reaktion darin, in CSS3 Opazität zu verwenden, um die Transparenz des Elements festzulegen.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Transparenter Hintergrund, transparenter Text</title>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
.container {
Breite: 600px;
Höhe: 400px;
Hintergrund: URL('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') keine Wiederholung;
Hintergrundgröße: Abdeckung;
-webkit-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße: Abdeckung;
Hintergrundposition: Mitte 0;
}
.demo {
Position: absolut;
Breite: 260px;
Höhe: 60px;
oben: 260px;
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
Hintergrundfarbe: schwarz;
Deckkraft: 0,5;
}
.demo p {
Farbe: #FFF;
Schriftgröße: 18px;
Schriftstärke: 600;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="Demo">
<p>Die Fußballweltmeisterschaft 2018 hat begonnen: 10 Tage</p>
</div>
</div>
</body>
</html>
Die Wirkung ist wie folgt:
Der Hintergrund ist transparent, der Text ist auch transparent.png Dies scheint den Anforderungen zu entsprechen, ist aber nicht perfekt. Nach dem Einstellen der Deckkraft wird das gesamte Element durchscheinend, wodurch der Text verschwommen erscheint. Diese Lösung ist nicht empfehlenswert. Tatsächlich ist das Festlegen der Deckkraft nicht die einzige Möglichkeit, in CSS Transparenz zu erreichen. Es gibt zwei weitere Typen:
Hier verwende ich die Methode zum Einstellen von RGBA:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Hintergrund transparent, Text undurchsichtig</title>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
.container {
Breite: 600px;
Höhe: 400px;
Hintergrund: URL('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') keine Wiederholung;
Hintergrundgröße: Abdeckung;
-webkit-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße: Abdeckung;
Hintergrundposition: Mitte 0;
}
.demo {
Position: absolut;
Breite: 260px;
Höhe: 60px;
oben: 260px;
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
Hintergrundfarbe: rgba(0,0,0,0,5);
}
.demo p {
Farbe: #FFF;
Schriftgröße: 18px;
Schriftstärke: 600;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="Demo">
<p>Die Fußballweltmeisterschaft 2018 hat begonnen: 10 Tage</p>
</div>
</div>
</body>
</html>
Die Wirkung ist wie folgt:
Hintergrund transparent, Text undurchsichtig.png Nach dieser Einstellung erscheint der Text deutlich klarer. Zusammenfassung Tatsächlich gibt es nicht nur eine Möglichkeit, diese Anforderung zu erfüllen. Sie können auch zwei DIVs an derselben Position verwenden, eines mit einem halbtransparenten Hintergrund-DIV und das andere mit einem Text-DIV. Dies kann das Problem ebenfalls lösen, erfordert jedoch eine absolute Positionierung oder einen negativen Rand und ein DIV mit leerem Inhalt. Diese Methode kann in einigen Szenarien etwas kompliziert erscheinen, wie im folgenden Beispiel gezeigt, daher müssen spezifische Probleme in tatsächlichen Bedarfsszenarien analysiert werden.
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Docker-Compose-Tutorial: Installation und Schnellstart
>>: Vollständige Analyse der Webseitenelemente
Artikel empfehlen
So erstellen Sie ein neues Image basierend auf einem vorhandenen Image in Docker
Das Erstellen neuer Images aus vorhandenen Images...
Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).
Ⅰ. Problembeschreibung: Verwenden Sie CSS, um kon...
Linux-Datei-/Verzeichnisberechtigungen und Eigentümerverwaltung
1. Übersicht über Dateiberechtigungen und Eigentu...
Führt diese SQL-Schreibmethode wirklich dazu, dass der Index fehlschlägt?
Vorwort Im Internet gibt es häufig Artikel, die v...
Analyse von MySQL-Latenzproblemen und Datenlöschungsstrategieprozess
Inhaltsverzeichnis 1. MySQL-Replikationsprozess 2...
Detaillierte Erklärung zur Verwendung der Stat-Funktion und des Stat-Befehls in Linux
stat-Funktion und stat-Befehl Erklärung von [inod...
WeChat-Applet implementiert Taschenrechnerfunktion
In diesem Artikel wird der spezifische Code für d...
HTML-Tabellen-Tag-Tutorial (44): Tabellenkopfzeilen-Tag
<br />Um die Tabellenstruktur im Quellcode d...
Vue+SSH-Framework zur Realisierung von Online-Chat
In diesem Artikel wird der spezifische Code des V...
Detaillierte Erklärung der React-Komponentenkommunikation
Inhaltsverzeichnis Einführung in die Komponentenk...
HTML validieren HTML-Validierung
„HTML-Validierung“ bezieht sich auf die HTML-Valid...
Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist
In diesem Artikelbeispiel wird der spezifische Co...
So implementieren Sie geplante MySQL-Aufgaben unter Linux
Annahme: Die gespeicherte Prozedur wird täglich v...
Konfiguration des SSL-Zertifikats für den Nginx-Domänennamen (Website-HTTP auf https aktualisiert)
Vorwort HTTP und HTTPS In unserem täglichen Leben...
Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat
Beschreibung des Phänomens: Das Projekt verwendet...