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
HTML als Startseite festlegen und zu Favoriten hinzufügen_Powernode Java Academy
So implementieren Sie die Funktionen „Als Startse...
Lösung für den Überlauf der HTML-Tabelle
Wenn die Tabelle breit ist, kann es zu einem Über...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikelbeispiel wird der spezifische Co...
Der gesamte Prozessdatensatz der rekursiven Komponentenkapselung von Vue3
Inhaltsverzeichnis Vorwort 1. Rekursive Komponent...
MySQL NULL-Datenkonvertierungsmethode (unbedingt lesen)
Wenn Sie MySQL zum Abfragen der Datenbank verwend...
Detailliertes Beispiel für SpringBoot + nginx zum Erreichen der Ressourcen-Upload-Funktion
Vor Kurzem habe ich gelernt, mit Nginx statische ...
Lösen Sie schnell das Problem des langsamen Starts nach der Tomcat-Neukonfiguration
Während der Konfiguration des Jenkins+Tomcat-Serv...
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...
Die Verbindung zwischen JavaScript-Konstruktoren und Prototypen
Inhaltsverzeichnis 1. Konstrukteure und Prototype...
Implementierung der Einstellungen für virtuellen Nginx-Host basierend auf Domänenname, Port und unterschiedlicher IP
1. Einrichten des virtuellen Nginx-Hosts Mit virt...
Der Handler PageHandlerFactory-Integrated hat ein fehlerhaftes Modul ManagedPipelineHandler in seiner Modulliste
Wenn Sie ein Webprojekt entwickeln, müssen Sie II...
Tutorial zur Installation von Microsoft TrueType-Schriftarten auf Ubuntu-basierten Distributionen
Wenn Sie einige Microsoft-Dokumente mit LibreOffi...
So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS
Inhaltsverzeichnis 1. Was zu debuggen ist 2. Funk...
Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)
In diesem Artikel werden hauptsächlich die Unters...
Centos8 (Minimalinstallation) Tutorial zur Installation von Python3.8+pip
Nachdem ich die Installation von Python8 minimier...