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
Schritte und Fallstricke beim Upgrade von Linux MySQL 5.5 auf MySQL 5.7
Inhaltsverzeichnis Linux MySQL 5.5 auf MySQL 5.7 ...
So verwenden Sie residente Knoten für die Ebenenverwaltung in CocosCreator
CocosCreator-Version: 2.3.4 Die meisten Spiele ve...
Analyse der Gründe, warum der Index bei der Suche im MySql-Bereich nicht wirksam wird
1 Problembeschreibung Dieser Artikel sortiert den...
Konfigurieren Sie VIM als C++-Entwicklungseditor in Ubuntu
1. Kopieren Sie die Konfigurationsdatei in die Be...
Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten
Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...
Wie implementiert Vue die Kommunikation zwischen Komponenten?
Inhaltsverzeichnis 1. Kommunikation zwischen Vate...
Vue-Element implementiert das Hinzufügen, Löschen und Ändern von Daten in Tabellen
In diesem Artikel wird der spezifische Code des V...
Beispiele für Optimierungstechniken zur Verbesserung der Effizienz langsamer Abfragen in MySQL IN-Anweisungen
Die Tabellenstruktur ist wie folgt. Es gibt nur 6...
Installations-Tutorial zur neuesten MySQL-Version 8.0.17 mit Dekomprimierung
Ich persönlich denke, dass die dekomprimierte Ver...
Detaillierte Schritte zur Installation von MinIO auf Docker
Inhaltsverzeichnis 1. Überprüfen Sie, ob die Dock...
Beispiel für asynchronen Dateiupload in HTML
Code kopieren Der Code lautet wie folgt: <form...
So bedienen Sie das Kontrollkästchen auf einer HTML-Seite
Kontrollkästchen sind auf Webseiten sehr verbreit...
Details zur Reihenfolge, in der MySQL my.cnf liest
Inhaltsverzeichnis Die Reihenfolge, in der MySQL ...
MySQL: MySQL-Funktionen
1. Integrierte Funktionen 1. Mathematische Funkti...
Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme
MySQL unterstützt verschachtelte Transaktionen, a...