Beispiel, wie man einen Div-Hintergrund transparent macht
Es gibt zwei gängige Möglichkeiten, den Div-Hintergrund transparent zu machen:1. Setzen Sie das Opazitätsattribut auf einen Wert von 0 bis 1, 0 für transparent und 1 für undurchsichtig. Diese Methode macht jedoch auch den Inhalt des Div transparent. Die Wirkung ist wie folgt:
2. Stellen Sie die Hintergrundfarbe im RGBA-Format ein. Das Format lautet: Hintergrundfarbe: RGBA (0,0,0,0 ~ 1), wobei 0 transparent und 1 undurchsichtig bedeutet.
Der Code lautet wie folgt :
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
.Ausweis{
Breite: 600px;
Höhe: 300px;
}
.tm1{
Rand: 40 automatisch;
Textausrichtung: zentriert;
Zeilenhöhe: 200px;
Breite: 800px;
Höhe: 200px;
Hintergrundfarbe: gelb;
Deckkraft: 0,6;
}
.tm2{
Rand: 40 automatisch;
Textausrichtung: zentriert;
Zeilenhöhe: 200px;
Breite: 800px;
Höhe: 200px;
Hintergrundfarbe: rgba(255, 255, 0, 0,5);
}
</Stil>
</Kopf>
<Text>
<!--Hintergrund-Div-->
<div Klasse="Ich würde">
<!--Transparente Div-Methode 1-->
<div class="tm1">Transparente Div-Methode 1, Transparenz durch Opazität festlegen, der Text auf dem Div ist auch transparent: Opazität: 0,6;</div><br>
<!--Transparente Div-Methode 2-->
<div class="tm2">Transparente Div-Methode 2, Transparenz durch RGBA einstellen, der Text auf der Div ist nicht transparent: background-color:rgba(255,0,0,0.5);</div>
</div>
</body>
</html>
Hier ist noch ein weiterer Punkt, den Sie beachten sollten: RGBA steht für Rot, Grün, Blau, Alpha (englisch: Red, Green, Blue, Alpha).
Link zur Farbcode-Vergleichstabelle: Dies ist das Ende dieses Artikels mit Beispielen zum Einstellen der Div-Hintergrundtransparenz. Weitere relevante Inhalte zur Div-Hintergrundtransparenz finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Bedeutung der Hintergrundfarbdeklaration beim Schreiben von Stilen
>>: Einige nützliche Methoden zur Meta-Einstellung (unbedingt lesen)
Artikel empfehlen
So fahren Sie nginx herunter/starten es neu
Schließung Dienst Nginx stoppen systemctl stoppt ...
Ein kurzer Vortrag über die Geschichte von React Router
Wenn Sie React Router verstehen möchten, sollten ...
Docker-Installations-Tutorial zu RocketMQ (am ausführlichsten)
RocketMQ ist eine verteilte, warteschlangenbasier...
Lösung für die leere Seite nach einem vue.js-gepackten Projekt
Ich glaube, dass viele Partner, die gerade erst m...
Eine Zusammenfassung detaillierter Einblicke in den Import von CSS
Auf die Entwicklungsgeschichte von CSS wird hier ...
Einführung in die Bereitstellung des Selenium-Crawler-Programms unter Linux
Inhaltsverzeichnis Vorwort 1. Was ist Selen? 2. N...
Detaillierte Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL
In MySQL kann das Problem der Groß- und Kleinschr...
Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle
MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...
Implementierung der Nginx-Konfiguration des lokalen Image-Servers
Inhaltsverzeichnis 1. Einführung in Nginx 2. Aufb...
Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode
Einmal haben wir über das Würfelspiel gesprochen....
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
Natives js zum Erreichen eines einfachen Karusselleffekts
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung der Angular-Datenbindung und ihrer Implementierung
Inhaltsverzeichnis Vorwort Was ist Datenbindung? ...
So implementieren Sie die Paging-Funktion des MyBatis-Interceptors
So implementieren Sie die Paging-Funktion des MyB...