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 CSS3Kompatibilitä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:
Dann ist es nicht ratsam, Opazität zu verwenden, um „transparenten Hintergrund, undurchsichtigen Text“ zu erzielen.
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:
Dann Verwenden Sie RGBA, um Hintergrundtransparenz zu erreichen. Textopazität ist wünschenswert.
Empfohlenes Tutorial:
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!
