Heim > Artikel > Web-Frontend > So stellen Sie den Kontrast eines Bildes in CSS ein
So stellen Sie den Kontrast eines Bildes in CSS ein
- 王林Original
- 2020-11-12 09:50:242482Durchsuche
So legen Sie den Kontrast eines Bildes in CSS fest: Sie können das Attribut [filter:contrast(%)] verwenden, um den Kontrast eines Bildes festzulegen, z. B. [filter:contrast(0%)]. Das Filterattribut definiert den visuellen Effekt des Elements, z. B. Unschärfe, Sättigung, Kontrast usw.
Attributeinführung: Das
filter-Attribut definiert den visuellen Effekt (z. B. Unschärfe und Sättigung) des Elements (normalerweise a1f02c36ba31691bcfe87b2722de723b).
(Empfehlung für Lernvideos: CSS-Video-Tutorial)
Grammatik:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Kontrast (%) Passen Sie den Kontrast des Bildes an. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Der Wert beträgt 100 % und das Bild bleibt unverändert. Die Werte können 100 % überschreiten, was bedeutet, dass ein niedrigerer Vergleich verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 200px;
}
.img1{
/*没有滤镜效果*/
/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
-webkit-filter: none;
filter: none;
}
.img2{
/*调整元素的对比度*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: contrast(30);
filter: contrast(30);
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" class="img1"/>
<img src="1.jpg" class="img2"/>
</div>
</body>
</html>Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo stellen Sie den Kontrast eines Bildes in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!