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
Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)
Inhaltsverzeichnis 1. Haken anzeigen 1. Was bei d...
Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente
Eine einfache Nummernschild-Eingabekomponente (vu...
Verstehen Sie das Prinzip des Seitenersetzungsalgorithmus anhand von Codebeispielen
Algorithmus zum Ersetzen von Seiten: Das Wesentli...
dh Filtersammlung
Der IE hat uns in der frühen Entwicklungsphase Ko...
So lassen sich Python-Skripte direkt unter Ubuntu ausführen
Nehmen wir als Beispiel das Übersetzungsprogramm....
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12
Das Download- und Installationstutorial für MySQL...
Mehrere Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx
Ich habe 3 Methoden zusammengefasst, um mehrere F...
Schritte zum Einrichten einer HTTPS-Website basierend auf Nginx
Inhaltsverzeichnis Vorwort: Verschlüsselungsalgor...
Verwenden von react-beautiful-dnd zum Implementieren von Drag & Drop zwischen Listen
Inhaltsverzeichnis Warum react-beautiful-dnd wähl...
Einführung in die Verwendung von Unicode-Zeichen in Webseiten (&#, \u usw.)
Die ersten Computer konnten nur ASCII-Zeichen ver...
HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld
Ich habe vor Kurzem eine Website mit Anwaltsempfe...
Grundlegendes Verständnis und Verwendung der HTML-Auswahloption
Detaillierte Erklärung von HTML (Option auswählen)...
Installieren Sie Tomcat und stellen Sie die Website unter Linux bereit (empfohlen)
Installieren Sie JDK: Offizieller Oracle-Download...
Implementierung von MySQL mit dem Befehl mysqlbinlog zum Wiederherstellen versehentlich gelöschter Daten
Experimentelle Umgebung: MySQL 5.7.22 Binäres Log...
Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert
Nachdem die Tabellenbreite auf der Seite auf width...