Beispiel für die Verwendung von CSS zum Erzielen eines halbtransparenten Hintergrunds und undurchsichtigen Textes
|
Dieser Artikel stellt ein Beispiel vor, wie man mit CSS den Effekt eines halbtransparenten Hintergrunds und undurchsichtigen Textes erzielen kann. Die Einzelheiten sind wie folgt: Die Wirkung ist wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
html{
Hintergrund: #6a8db1;
}
.beiseite{
Hintergrundfarbe: RGBA (244,251,251,0,47);
Rand: 1px durchgezogen #FFFFFF;
Breite: 200px;
Textausrichtung: zentriert;
Farbe: #FFFFFF;
}
.aside div{
Höhe: 55px;
Rahmen unten: 1px durchgezogen #FFFFFF;
Zeilenhöhe: 55px;
}
.aside div Schriftart{
Schriftstärke: 800;
}
.aside div span {
Schriftstärke: 800;
Rand links: 18px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="beiseite">
<div>
<font>Warteraum 1</font>
<span>10 Personen</span>
</div>
<div>
<font>Warteraum 1</font>
<span>4 Personen</span>
</div>
<div>
<font>Warteraum 1</font>
<span>12 Personen</span>
</div>
<div>
<font>Warteraum 1</font>
<span>6 Personen</span>
</div>
<div>
<font>Warteraum 1</font>
<span>8 Personen</span>
</div>
</div>
</body>
</html>Die Farbe kann entsprechend der Palette angepasst 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. |
>>: Der Einsatz von MySQL Triggern und worauf zu achten ist
Artikel empfehlen
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14 (allgemein)
MySQL-Dienst 8.0.14-Installation (allgemein), zu ...
Eine Untersuchung des JS-Operators im Problem
Die Sache ist: Jeder kennt „Speicherlecks“. Es gi...
Detaillierte Erklärung des Parsererror-Fehlerfalls in der JavaScript-Lösung in Ajax
Die ultimative Methode zur Lösung des Ajax-Parser...
Beispiel für den Mehrpunkt-Routenplanungsprozess des WeChat-Applets Amap – detaillierte Erläuterung
Anruf Wie rufe ich die Amap-API auf? Das offiziel...
Unterschiede zwischen FLOW CHART und UI FLOW
Viele Konzepte im UI-Design mögen in der Formulie...
So installieren Sie Docker auf Ubuntu20.04 LTS
Null: Alte Version deinstallieren Ältere Versione...
So verwenden Sie React zur Implementierung einer Bilderkennungs-App
Lassen Sie mich Ihnen zuerst das Effektbild zeige...
Tomcat-Domänennamenzugriff mit mehreren Ports und Konfiguration zum Aktivieren der GZIP-Komprimierungsmethode
1. Zusätzlich zum Standardport 8080 versuchen wir...
Select unterstützt kein Doppelklick-DBClick-Ereignis
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
Schaltflächen und Dropdown-Menüs für Studiennotizen in Bootstrap 3.0
Der vorherige Artikel war eine einfache Überprüfu...
Klassen in TypeScript
Inhaltsverzeichnis 1. Übersicht 2. Definieren Sie...
MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter CentOS7
Deinstallieren Sie die alte MySQL-Version (übersp...
Einführung in den Vue-Lebenszyklus und detaillierte Erklärung der Hook-Funktionen
Inhaltsverzeichnis Einführung in den Vue-Lebenszy...
Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.25
Installations-Tutorial zur dekomprimierten Versio...
Teilen einiger wunderbarer Verwendungsmöglichkeiten von wxs-Dateien im WeChat-Applet
Inhaltsverzeichnis Vorwort Anwendung Filter Ziehe...