Heim > Artikel > Web-Frontend > Drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen

Drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen

王林nach vorne: 2020-06-10 09:17:114942Durchsuche

Es gibt normalerweise drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen. Im Folgenden finden Sie die Möglichkeiten, die Deckkraft dieser drei Möglichkeiten auf 80 % zu schreiben:

Opazität:x Bei CSS3 liegt der Wert von x zwischen 0 und 1, z. B. Deckkraft: 0,8

rgba(rot, grün, blau, alpha) Bei CSS3 liegt der Wert von Alpha zwischen 0 und 1, z. B. rgba (255.255.255,0,8)

IE exklusiver Filter filter:Alpha(opacity=x), der Wert von x liegt zwischen 0 und 100, wie zum Beispiel filter:Alpha(opacity=80)

( Empfohlenes Video-Tutorial: CSS-Video-Tutorial

1. Deckkraft von CSS3

Kompatibilität: IE6, 7, 8 werden nicht unterstützt, IE9 und höher und Standard Browser unterstützen

Gebrauchsanweisung: Alle untergeordneten Elemente des Opazitätselements werden gemeinsam auf Transparenz eingestellt. Es wird im Allgemeinen verwendet, um die Gesamtopazität des Bildes oder Moduls anzupassen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;
  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
 
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

Danach Durch die Verwendung von Opazität wird das gesamte Modul transparent. Der Effekt ist wie folgt:

Drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen Dann ist es nicht ratsam, Opazität zu verwenden, um „transparenten Hintergrund, undurchsichtigen Text“ zu erzielen.

2. RGBA von CSS3

Die sogenannte RGBA-Farbe ist, wie der Name schon sagt, die Farbe von R+G+B+A, genauer gesagt Es ist Rot+Grün+Blau+ Die Farbe von Alpha, übersetzt in Rot + Grün + Blau + Alpha-transparente Farbe.

background:rgba(200, 54, 54, 0.5);

Unter diesen kann die 0 vor 0,5, die die Transluzenz angibt, weggelassen werden, oder direkt .5 ist auch akzeptabel.

Kompatibilität: IE6, 7 und 8 werden nicht unterstützt, aber IE9 und höher sowie Standardbrowser werden unterstützt

So lösen Sie das Problem, dass der IE8-Browser RGBA nicht unterstützt:

background:rgba(0,0,0,0.5); filter: 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

Gebrauchsanweisung: Legen Sie die Deckkraft der Farbe fest. Wird im Allgemeinen zum Anpassen der Deckkraft von Hintergrundfarbe, Farbe, Kastenschatten usw. verwendet.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
  background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

Verwenden Sie RGBA in der Hintergrundfarbe. In Standardbrowsern ist der Hintergrund transparent und der Text ist undurchsichtig. Der Effekt ist wie folgt:

Drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen Dann Verwenden Sie RGBA, um Hintergrundtransparenz zu erreichen. Textopazität ist wünschenswert.

Empfohlenes Tutorial:

CSS-Schnellstart

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)Nächster Artikel：Mehrere Verwendungsmöglichkeiten von CSS3-Attributselektoren (Codebeispiele)

In Verbindung stehende Artikel

Mehr sehen