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
Grundlagen der HTML-Bearbeitung (ein Muss für Anfänger)
Öffnen Sie DREAMWEAVER und erstellen Sie ein neue...
Detaillierte Erläuterung gängiger Vorgänge für Docker-Images und -Container
Bildbeschleuniger Manchmal ist es schwierig, Bild...
JavaScript zum Erreichen eines einfachen Seiten-Countdowns
In diesem Artikelbeispiel wird der spezifische Ja...
So installieren Sie MySQL 5.7 manuell auf CentOS 7.4
MySQL-Datenbanken werden häufig verwendet, insbes...
Lösung für falsche Zeichenfolgenwerte in MySQL
Viele Freunde berichten von folgendem Fehler, wen...
So entfernen Sie die Unterstreichung eines Hyperlinks anhand von drei einfachen Beispielen
Um die Unterstreichung eines Hyperlinks zu entfern...
So konvertieren Sie zusätzlichen Text in HTML in Auslassungspunkte
Wenn Sie zusätzlichen Text in HTML als Auslassung...
Zusammenfassung der praktischen Erfahrungen zu HTML-Wissenspunkten
1. Das Tabellen-Tag ist Tabelle, tr ist Zeile, td ...
Implementierungsbeispiel für den Linux-Befehl „tac“
1. Befehlseinführung Der Befehl tac (umgekehrte R...
HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN
In vertikaler Richtung können Sie die Zellenausri...
So richten Sie das Terminal so ein, dass Anwendungen nach dem Start von Ubuntu ausgeführt werden
1. Geben Sie „Start“ in die Menüleiste ein und kl...
So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)
Ursprung: Vor einigen Tagen hat ein Tester eine A...
Zusammenfassung der wichtigsten Attribute des Body-Tags
bgcolor="Textfarbe" background="Hin...
Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL
Beim Verknüpfen zweier Tabellen konnte kein Fremd...
HTTP-Rückgabecodeliste (Erklärung auf Chinesisch und Englisch)
Liste der HTTP-Rückgabecodes (unten finden Sie ei...