Wie stelle ich die Hintergrundfarbe in CSS so ein, dass sie transparent ist? Einführung in zwei Methoden zum Festlegen der Hintergrundfarbtransparenz in CSS

Im Webseiten-Layout kann es für die Gesamtschönheit der Webseite notwendig sein, einige Teile der Webseite auf eine transparente Hintergrundfarbe festzulegen. Wie stellt man also die Hintergrundfarbe so ein, dass sie transparent ist? In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS die Hintergrundfarbe auf transparent einstellen.

Es gibt zwei Möglichkeiten, die Transparenz der Hintergrundfarbe in CSS festzulegen: Eine besteht darin, sie über RGBA festzulegen, und die andere darin, sie über Hintergrund und Deckkraft festzulegen.

Sehen wir uns die spezifischen Beispiele dieser beiden Methoden in CSS an, um jeweils eine transparente Hintergrundfarbe zu erreichen

1 Stellen Sie die Hintergrundfarbe so ein, dass sie durch den Hintergrund hindurch transparent ist Deckkraft

Der Attributwert im Hintergrundattribut ist relativ einfach, daher werde ich hier nicht auf Details eingehen. Weitere Informationen finden Sie im CSS-Studienhandbuch. Werfen wir hier einen kurzen Blick auf das Opazitätsattribut

Opazitätsattribut Die „Opazität“ des Parameters wird durch eine Zahl im Bereich von 0,0 bis 1,0 dargestellt. Vollständig transparent ist 0,0, vollständig undurchsichtig ist 1,0, d. h. eine höhere Zahl bedeutet, dass das Element undurchsichtiger ist. Zusätzlich zu den Parametern „Deckkraft“ gibt es auch die Funktion „Vererbung“. Erbt die Eigenschaften der übergeordneten Ebene, die Browserunterstützung ist jedoch schlecht und wird nicht empfohlen.

Nachdem wir die Einführung der beiden Attribute gelesen haben, schauen wir uns ein konkretes Beispiel für die Einstellung der Hintergrundfarbtransparenz durch Hintergrund und Deckkraft an.

Der Code lautet wie folgt:

<div class="box"></div>

rrree

Hintergrundfarbe ist transparent. Der Effekt ist wie folgt:

Anleitung: Stellen Sie die Transparenz der Hintergrundfarbe durch Hintergrund und Deckkraft ein. Wenn sich Text auf dem Hintergrund befindet, wird der Text ebenfalls transparent transparent, genau wie der Effekt unten

Es hängt also von der Situation ab, diese Methode zu verwenden, um die Hintergrundfarbe transparent einzustellen.

Empfohlene verwandte Artikel:
1. Wie erreicht man Hintergrundtransparenz in CSS im Webdesign? Wie stelle ich Transparenz in CSS ein? Zwei Methoden zum Festlegen der Transparenz (Codebeispiele)
Verwandte Video-Tutorials:
1.CSS-Video-Tutorial – Jade Girl Heart Sutra Edition

2. Stellen Sie die Hintergrundfarbe mithilfe der RGBA-Methode auf transparent ein

Die sogenannte RGBA-Farbe besteht aus den drei Primärfarben von RGB plus ALPHA. Bietet Transparenzeigenschaften und fügt dem Hintergrund Farbe hinzu.

Verwendung: background:rgba(R,G, B, A);

Sehen wir uns ein konkretes Beispiel für die Einstellung der Hintergrundfarbtransparenz über rgba an:

.box{
  width:300px; 
  height:200px; 
  margin:0 auto; 
  border:1px solid #ccc; 
  background:red; 
  opacity:0.2;  
}

<div class="title_div">背景颜色透明</div>

Die Auswirkung der Einstellung der Hintergrundfarbtransparenz in der RGBA-Methode ist wie folgt:

Hinweis: Durch Festlegen der Hintergrundfarbtransparenz in der RGBA-Methode können Sie die Hintergrundfarbe transparent einstellen und der Text muss undurchsichtig sein, aber die Kompatibilität dieser Methode ist begrenzt. Nein, sie ist nicht mit dem IE-Browser kompatibel.

Weitere Informationen zu CSS finden Sie auf der chinesischen PHP-Website CSS-Video-Tutorials

,

CSS3-Video-Tutorial

,

CSS-Lernhandbuch und CSS3-Lernhandbuch zum weiteren Studium.

Das obige ist der detaillierte Inhalt vonWie stelle ich die Hintergrundfarbe in CSS so ein, dass sie transparent ist? Einführung in zwei Methoden zum Festlegen der Hintergrundfarbtransparenz in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!