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)

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung

Verwandte Artikel: Installieren Sie Docker mit yu...

Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser

Vom Backend zum Frontend: was für eine Tragödie. A...

Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt

1. Zunächst müssen wir zwischen der Tomcat-Protok...

So installieren Sie Nginx in CentOS

Offizielle Dokumentation: https://nginx.org/en/li...

Beispiel, wie man einen Div-Hintergrund transparent macht

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

Mit CSS3 erstellter Hover-Zoom-Effekt

JavaScript, um den Effekt des Tab-Leistenwechsels zu erzielen

Ein praktischer Bericht zur Fehlerbehebung bei einem Anstieg der Redis-Verbindungen in Docker

Führen Sie die Schritte zum Konfigurieren der grundlegenden Benutzerauthentifizierung auf Nginx-Ebene aus.

Implementierung eines Docker-Cross-Host-Netzwerks (manuell)

Zusammenfassung der SQL-Deduplizierungsmethoden

Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

Detaillierte Erläuterung des geplanten Ausführungsbefehls von Crontab unter Linux

Beispiel für die Implementierung eines hohlen Dreieckpfeils und eines X-Symbols mit anschließendem Pseudoelement

Artikel empfehlen

Codeanalyse synchroner und asynchroner SetState-Probleme in React

Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten

Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen

Eine schnelle Lösung zum versehentlichen Löschen von MySQL-Daten (MySQL Flashback Tool)

Detaillierte Erklärung der Unterschiede zwischen ähnlichen Tags und Attributen in HTML

Neue Verwendung von watch und watchEffect in Vue 3

Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.11 winx64.zip

Reine clientseitige und rein serverseitige Implementierungslösungen für die Konvertierung von HTML in PDF

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung

CSS-Box ausblenden/einblenden und dann den Implementierungscode der obersten Ebene

Ausführliches Installationstutorial für MySQL 8.0.12 winx64

js-Entwicklungs-Plugin zum Erzielen eines Tab-Effekts

Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser

Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt

So installieren Sie Nginx in CentOS