So stellen Sie die CSS-Deckkraft ein-Front-End-Fragen und Antworten-php.cn

So stellen Sie die CSS-Deckkraft ein

藏色散人

Freigeben： 2023-01-04 09:34:09

Original

4527 Leute haben es durchsucht

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.

So stellen Sie die CSS-Deckkraft ein

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.

So stellen Sie die CSS-Deckkraft ein

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);}

Nach dem Login kopieren

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）.

Nach dem Login kopieren

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Effekt:

So stellen Sie die CSS-Deckkraft ein Empfohlenes Lernen: „

css-Video-Tutorial

“

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!