Heim > Artikel > Web-Frontend > So legen Sie Transparenz in CSS mit drei Methoden fest
Methode: 1. Fügen Sie dem Element den Stil „background-color:rgba(R,G,B,A)“ hinzu, um die Farbtransparenz festzulegen. 2. Fügen Sie dem Element den Stil „opacity:transparent value;“ hinzu Legen Sie die Transparenz fest. 3. Stellen Sie den Stil „filter:opacity(%)“ auf das Bild ein.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Es gibt drei Möglichkeiten, Transparenz in CSS festzulegen:
rgba()
rgba()
opacity
属性
filter:opacity(%)
方法1:rgba()函数
rgba()函数可以设置颜色透明度,语法如下:
RGBA(R,G,B,A)
取值:
R: 红色值。正整数 | 百分数
G: 绿色值。正整数 | 百分数
B: 蓝色值。正整数 | 百分数
A: Alpha透明度。取值0~1之间。
例如:rgba(255,0,0,0.5)
半透明红色
rgba()只是单纯的可以设置颜色透明度,这样在页面的布局中有很多应用。比如说:让背景出现透明效果,但上面的文字不透明。
示例:
background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明
(学习视频分享:css视频教程)
方法2:使用opacity属性
在 CSS3 中,增加了一个 opacity 属性,使用此属性可以设置元素的透明度。opacity属性具有继承性,会使容器中的所有元素都具有透明度;
语法:
opacity: value ;
value :指定不透明度,从0.0(完全透明)到1.0(完全不透明)。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>opactity</title> <style> .box1{ position:relative; width:200px;height:200px; background-color: #00f; } .box2{ position:absolute; top:80px; left:80px; width:200px; height:200px; background-color:#0f0; } .box3{ position:relative; width:200px; height:200px; background-color:#f00; z-index:1; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
设置透明度的效果
.box1{ position:relative; width:200px;height:200px; background-color: #00f; z-index:10; opacity:0.5; } .box2{ position:absolute; top:80px; left:80px; width:200px; height:200px; background-color:#0f0; z-index:5; opacity:0.5; } .box3{ position:relative; width:200px; height:200px; background-color:#f00; z-index:1; opacity:0.5; }
表现效果:
方法3:设置filter:opacity(%)
opacity
attribute
filter:opacity(%)
Methode 1: rgba()-Funktion
rgba()-Funktion kann Farbtransparenz festlegen, die Syntax lautet wie folgt:
filter: opacity(%);
Wert:
R: roter Wert. Positive Ganzzahl |. Prozent
🎜G: Grüner Wert. Positive Ganzzahl |. Prozent 🎜🎜🎜B: Blauer Wert. Positive ganze Zahl |. Prozent 🎜🎜🎜A: Alpha-Transparenz. Der Wert liegt zwischen 0 und 1. 🎜🎜Zum Beispiel:rgba(255,0,0,0.5)
Durchscheinendes Rot 🎜🎜rgba() kann einfach die Farbtransparenz festlegen, sodass das Layout des Seite Es gibt viele Anwendungen in . Beispiel: Machen Sie den Hintergrund transparent, aber der Text oben ist undurchsichtig. 🎜🎜Beispiel: 🎜<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .opacity1 { opacity: 0.5; filter: none; } .opacity2 { opacity: 0.2; filter: none; } </style> </head> <body> <div> 正常图片:<br /><br /> <img src="1.jpg" style="max-width:90%" / alt="So legen Sie Transparenz in CSS mit drei Methoden fest" ></div><br /> <div> 设置透明度的图片:<br /><br /> <img class="opacity1" src="1.jpg" style="max-width:90%" / alt="So legen Sie Transparenz in CSS mit drei Methoden fest" > <img class="opacity2" src="1.jpg" style="max-width:90%" / alt="So legen Sie Transparenz in CSS mit drei Methoden fest" > </div> </body> </html>🎜🎜🎜(Teilen von Lernvideos: CSS-Video-Tutorial🎜)🎜🎜Methode 2 : Verwenden Sie das Opazitätsattribut🎜🎜🎜In CSS3 wird ein Opazitätsattribut hinzugefügt. Mit diesem Attribut können Sie die Transparenz des Elements festlegen. Das Deckkraftattribut wird vererbt und macht alle Elemente im Container transparent. 🎜🎜Syntax: 🎜rrreee🎜🎜🎜Wert: Geben Sie die Deckkraft an, von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig). 🎜🎜Beispiel: 🎜rrreee🎜🎜🎜Stellen Sie den Effekt der Transparenz ein🎜rrreee🎜Leistungseffekt:🎜🎜🎜🎜Methode 3: Legen Sie den
filter:opacity(%)
-Stil fest, um die Transparenz des festzulegen image🎜🎜🎜filter-Eigenschaften sind CSS-Methoden, die Filtereffekte auf Elemente (hauptsächlich Bilder) auf einer Webseite anwenden. Sie können den Opazitätseffekt eines Bildes festlegen, indem Sie den opacity()-Wert festlegen. Eine Deckkraft von 0 % bedeutet, dass das Element vollständig transparent ist. Wenn die Deckkraft 100 % beträgt, handelt es sich um das Originalbild. 🎜🎜 Grammatik: 🎜rrreee🎜 Beispiel: 🎜rrreee🎜 Rendering: 🎜🎜🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜Das obige ist der detaillierte Inhalt vonSo legen Sie Transparenz in CSS mit drei Methoden fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!