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:

Bildbeschreibung hier einfügen

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.

Bildbeschreibung hier einfügen

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:
Die Funktion rgba() verwendet die Überlagerung von Rot®, Grün (G), Blau (B) und Transparenz (A), um verschiedene Farben zu erzeugen.

RGBA steht für Rot, Grün, Blau, Alpha (englisch: Red, Green, Blue, Alpha).
Rot (R) Eine Ganzzahl zwischen 0 und 255, die den Rotanteil der Farbe darstellt. .
Grün (G) Eine Ganzzahl zwischen 0 und 255, die die Grünkomponente der Farbe darstellt.
Blau (B) Eine Ganzzahl zwischen 0 und 255, die die Blaukomponente der Farbe darstellt.
Transparenz (A) nimmt Werte zwischen 0 und 1 an und stellt Durchsichtigkeit dar.
Sie können in der Baidu-Enzyklopädie nach RGBA-Werten suchen.
Ähnlich:

Bildbeschreibung hier einfügen

Link zur Farbcode-Vergleichstabelle:
https://www.sioe.cn/yingyong/yanse-rgb-16/

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)

7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen

Detaillierte Erklärung der Kommunikation zwischen hierarchisch verschachtelten Komponenten in der Vue-Frontend-Entwicklung

Inhaltsverzeichnis Vorwort Beispiel Zusammenfassu...

Beispiel, wie man einen Div-Hintergrund transparent macht

Es gibt zwei gängige Möglichkeiten, den Div-Hintergrund transparent zu machen:

7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen

Lernunterlagen zum Schreiben des ersten Vue-Programms

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 37)

Lösung für das Verschwinden des MySql-Dienstes aus unbekannten Gründen

Implementierungsmethode für die Datenspeicherung im WeChat-Applet

CSS Transition erweitert und reduziert Elemente durch Ändern der Höhe

Zeigen Sie die abhängigen Bibliotheken von so oder ausführbaren Programmen unter Linux an

JavaScript-Code zur Implementierung der Weibo-Batch-Unfollow-Funktion

Detaillierte Schritte zur Installation der dekomprimierten Version von MySQL 5.7.20 (zwei Methoden)

Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)

Artikel empfehlen

Eine kurze Analyse von SQL-Beispielen zum Auffinden nicht festgeschriebener Transaktionen in MySQL

JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)

Führen Sie die folgenden Schritte aus, damit Docker Images abrufen kann

Detaillierte Erklärung zum Anzeigen und Einstellen des SQL-Modus in MySQL

Ein genauerer Blick auf SQL-Injection

Drei Methoden zum automatischen Vervollständigen von Befehlen in der MySQL-Datenbank

So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Details zur Verwendung von Bimface in Vue

Erste Schritte mit Front-End-Vue-Unit-Tests

Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist

Docker-Compose-Installation DB2-Datenbankbetrieb

Detaillierte Erklärung der Kommunikation zwischen hierarchisch verschachtelten Komponenten in der Vue-Frontend-Entwicklung

Natives JS implementiert benutzerdefinierte Bildlaufleistenkomponente

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Detaillierte Erläuterung der Konfigurationspraxis für die MySQL-Master-Slave-Synchronisierung