Heim > Artikel > Web-Frontend > So legen Sie die Hintergrundtransparenz in CSS fest

So legen Sie die Hintergrundtransparenz in CSS fest

王林nach vorne: 2020-08-29 16:06:443182Durchsuche

Es gibt viele Möglichkeiten, Hintergrundtransparenz zu erreichen. In diesem Artikel werden die folgenden zwei Möglichkeiten vorgestellt:

(empfohlene verwandte Tutorials: CSS-Tutorial)

css3s Deckkraft:x, der Wert von x liegt zwischen 0 und 1 , wie z. B. Deckkraft: 0,8

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

1. IE6, 7 und 8 werden nicht unterstützt, werden aber von IE9 und höher sowie Standardbrowsern unterstützt.

Gebrauchsanweisung: Alle untergeordneten Elemente, die das Deckkraftelement festlegen, werden gemeinsam transparent sein. Es wird im Allgemeinen verwendet, um die Gesamtdeckkraft von Bildern anzupassen Module

<!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>

Nach der Verwendung der Deckkraft wird das gesamte Modul transparent, wie unten gezeigt:

So legen Sie die Hintergrundtransparenz in CSS fest Dann ist es nicht ratsam, die Deckkraft zu verwenden, um „transparenten Hintergrund, undurchsichtigen Text“ zu erzielen.

(Empfohlenes Video-Tutorial:

CSS-Video-Tutorial

) 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+alpha Die Farbe, übersetzt in rot + grün + blau + Alpha transparente Farbe.

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

Dabei 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, IE9 und höher werden von Standardbrowsern 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: Stellen Sie die Deckkraft der Farbe ein , allgemein verwendet Passen Sie die Deckkraft von Hintergrundfarbe, Farbe, Boxschatten usw. an.

<!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 undurchsichtig, wie unten gezeigt:

So legen Sie die Hintergrundtransparenz in CSS fest Dann ist es ratsam, RGBA zu verwenden, um einen transparenten Hintergrund und undurchsichtigen Text zu erzielen.

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

css css3 background

Stellungnahme：

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

Vorheriger Artikel：Was sind die Verwendungszwecke von @ in CSS?Nächster Artikel：Was sind die Verwendungszwecke von @ in CSS?

In Verbindung stehende Artikel

Mehr sehen