Heim > Artikel > Web-Frontend > So stellen Sie die CSS-Deckkraft ein
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: „
css-Video-TutorialDas 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!