So legen Sie Transparenz in CSS3 fest-CSS-Tutorial-php.cn

So legen Sie Transparenz in CSS3 fest

WBOY

Freigeben： 2021-11-19 17:50:33

Original

6865 Leute haben es durchsucht

Methode: 1. Verwenden Sie die Funktion rgba(), die Syntax lautet „rgba (Rotwert, Grünwert, Blauwert, Transparenzwert);“ 2. Verwenden Sie das Opazitätsattribut, die Syntax lautet „Opazität: Transparenzwert;“ "; 3 Bei Verwendung des Filterattributs lautet die Syntax „filter:opacity (transparency value);".

So legen Sie Transparenz in CSS3 fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So legen Sie Transparenz in CSS3 fest

1 Verwenden Sie die Funktion rgba(), um verschiedene Farben durch Überlagerung von Rot (R), Grün (G), Blau (B) und Transparenz (A) zu erzeugen.

RGBA steht für Rot, Grün, Blau und Transparenz (englisch: Red, Green, Blue, Alpha).

Rot (R) Eine Ganzzahl zwischen 0 und 255, die den Rotanteil der Farbe darstellt. Grün (G) Eine Ganzzahl zwischen 0 und 255, die den Grünanteil der Farbe darstellt. Blau (B) Eine Ganzzahl zwischen 0 und 255, die den Blauanteil der Farbe darstellt. Transparenz (A) nimmt einen Wert zwischen 0 und 1 an und repräsentiert Transparenz.

So legen Sie Transparenz in CSS3 fest

Ausgabeergebnis:

So legen Sie Transparenz in CSS3 fest

2. Verwenden Sie das Deckkraftattribut, um den Deckkraftgrad des Elements festzulegen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie Transparenz in CSS3 fest

3 Verwenden Sie das Filterattribut, um den visuellen Effekt (z. B. Unschärfe und Sättigung) des Elements zu definieren (normalerweise So legen Sie Transparenz in CSS3 fest ). Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter:opacity(50%); /* Chrome, Safari, Opera */
    filter: opacity(50%);
}
</style>
</head>
<body>
<p>图片转为透明:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie Transparenz in CSS3 fest

(Lernvideo-Sharing: CSS-Video-Tutorial)

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