So legen Sie die Transparenz von div in CSS fest

So legen Sie die Div-Transparenz in CSS fest: Erstellen Sie zuerst eine neue HTML-Datei. Erstellen Sie dann zwei Divs und setzen Sie deren Klassenattribute auf div1 bzw. div2. Verwenden Sie schließlich das Attribut opacity oder „-moz-opacity“, um die Transparenz festzulegen zwei divs.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie Sie die Transparenz von div in CSS anpassen.

Erstellen Sie in der Datei test.html zwei Divs und setzen Sie deren Klassenattribute auf div1 bzw. div2, die zum Festlegen des Stils des Klassennamens mithilfe von CSS unten verwendet werden.

Verwenden Sie CSS, um die beiden Divs einheitlich so festzulegen, dass sie absolut oben auf der Seite positioniert sind und nach links schweben. Dieses Layout ermöglicht die Überlappung zweier Divs, und Sie können offensichtliche Auswirkungen beim Festlegen der Transparenz erkennen.

Verwenden Sie CSS, um die Breite des Div mit dem Klassennamen div1 auf 400 Pixel, die Höhe auf 200 Pixel und die Hintergrundfarbe auf Gelb festzulegen.

Verwenden Sie CSS, um die Breite des Div mit dem Klassennamen div2 auf 100 Pixel, die Höhe auf 100 Pixel und die Hintergrundfarbe auf Grün festzulegen.

Verwenden Sie CSS, um die Transparenz des Div mit dem Klassennamen div2 festzulegen. Verwenden Sie die Filterattributeinstellung für den IE-Browser, die -moz-opacity-Attributeinstellung für den Firefox-Browser und die Opazitätsattributeinstellung für andere Browser. Je kleiner der Transparenzwert ist, desto transparenter ist es. Stellen Sie beispielsweise unten die Div-Transparenz auf 30 % ein. Öffnen Sie die Datei test.html im Browser, um die Auswirkung des Div mit eingestellter Transparenz zu sehen.

Für detailliertere HTML/CSS-Kenntnisse besuchen Sie bitte die Spalte „CSS-Video-Tutorial“!

Das obige ist der detaillierte Inhalt vonSo legen Sie die Transparenz von div in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!