Heim > Artikel > Web-Frontend > So stellen Sie die CSS-Deckkraft ein
So stellen Sie die CSS-Deckkraft ein
- 藏色散人Original
- 2021-04-02 10:59:474493Durchsuche
So legen Sie die CSS-Deckkraft fest: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann den CSS-Stil zum Stil-Tag hinzu, um die Transparenz des Bildes festzulegen.
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer
css kann filter:alpha() und opacity verwenden, um die Opazität direkt festzulegen Der Bereich liegt zwischen 0 und 1, der Größenbereich liegt zwischen 1 und 100, wenn er mit filter:alpha() festgelegt wird.
filter:alpha() ist das Gleiche wie opacity zum Festlegen der Transparenz, aber opacity ist in IE8 und niedriger nicht kompatibel; daher muss das Filterattribut festgelegt werden
a:hover { opacity: 1; filter: alpha(opacity=100);}Wenn opacity zum direkten Festlegen der Transparenz verwendet wird, wird der Größenbereich festgelegt Liegt zwischen 0 und 1, ist es undurchsichtig, wenn filter:alpha() zum Festlegen der Deckkraft verwendet wird, liegt der Größenbereich zwischen 0 und 100 und ist undurchsichtig :alpha()
filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.
Deckkraft: Transparenzstufe, Bereich ist 0-100, 0 steht für völlig transparent, 100 steht für völlig undurchsichtig.
finishopacity: Beim Festlegen des Transparenzeffekts des Farbverlaufs wird damit die Transparenz am Ende angegeben. Der Bereich liegt ebenfalls zwischen 0 und 100.
Stil: Legen Sie den Stil der Verlaufstransparenz fest. Ein Wert von 0 steht für eine gleichmäßige Form, 1 für eine lineare Form, 2 für eine radiale Form und 3 für ein Rechteck.
startX und startY: stellen die anfänglichen X- und Y-Koordinaten des Verlaufstransparenzeffekts dar.
finishX und finishY: stellen die X- und Y-Koordinaten des Endes des Verlaufstransparenzeffekts dar.
opacity-Attribut:
opacity: value|inherit;
value gibt die Deckkraft an. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).
inherit sollte den Wert des Opazitätsattributs vom übergeordneten Element erben.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性规定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的图像：</p>
<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" style="max-width:90%">
</body>
</html>Effekt:
Empfohlenes Lernen: „
Das obige ist der detaillierte Inhalt vonSo stellen Sie die CSS-Deckkraft ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!