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)

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten

Artikel

So führen Sie MySQL in einer Docker-Umgebung aus und aktivieren Binlog, um die Master-Slave-Synchronisierung zu konfigurieren

Artikel

Eine Zusammenfassung einiger Orte, an denen ich Zeit mit TypeScript verbracht habe

Artikel

Beispiel, wie man einen Div-Hintergrund transparent macht

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

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

Einige Einstellungen von Div bezüglich Rahmen und Transparenz

Definition und Verwendung des MySQL-Cursors

So zeichnen Sie in CocosCreator ein cooles Radardiagramm

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18

Einfache Implementierung von Vue Drag & Drop

Webdesign-Erfahrung: Das Navigationssystem schlank machen

Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten

So führen Sie MySQL in einer Docker-Umgebung aus und aktivieren Binlog, um die Master-Slave-Synchronisierung zu konfigurieren

Eine Zusammenfassung einiger Orte, an denen ich Zeit mit TypeScript verbracht habe

Artikel empfehlen

Eine kurze Analyse von Unterabfragen und erweiterten Anwendungen in der MySql-Datenbank

MySQL 5.6 Installationsschritte mit Bildern und Text

Lösung für das Problem, dass Navicat keine Remoteverbindung zum MySql-Server herstellen kann

Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL

Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Code zum Aktivieren von IE8 im IE7-Kompatibilitätsmodus

MySQL versteht kurz, wie "order by" funktioniert

Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern

So passen Sie Docker-Images mit Dockerfile an

Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite

Analyse des Sperrmechanismus der MySQL-Datenbank

Erklärung der horizontalen und vertikalen Tabellenpartitionierung von MySQL

Kleines Problem mit dem Abstand zwischen Label und Eingabe im Google Browser

Detaillierte Einführung in den DOCTYPE-Typ