Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Graustufen des Hintergrundbilds in CSS fest
So legen Sie die Graustufen des Hintergrundbilds in CSS fest
- 王林Original
- 2021-03-04 14:31:215896Durchsuche
So legen Sie die Graustufen des Hintergrundbilds in CSS fest: Sie können es mit dem Filterattributfilter festlegen, z. B. [filter: Graustufen (100 %)], was bedeutet, dass das Bild vollständig in ein Graustufenbild konvertiert wird.
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.
Es gibt einen Filterattributfilter in CSS, der den visuellen Effekt des Elements (normalerweise img) definiert, wie z. B. Unschärfe, Sättigung, Graustufen usw.
Attributsyntax:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Gemeinsame Attributwerte:
none Standardwert, keine Auswirkung.
blur(px) Gaußsche Unschärfe für das Bild festlegen. Der „Radius“-Wert legt die Standardabweichung der Gaußschen Funktion fest, also wie viele Pixel auf dem Bildschirm zusammengefügt werden. Je größer der Wert, desto unschärfer ist er kann den CSS-Längenwert festlegen, Prozentwerte werden jedoch nicht akzeptiert.
Helligkeit(%) wendet eine lineare Multiplikation auf das Bild an, um es heller oder dunkler erscheinen zu lassen. Bei einem Wert von 0 % ist das Bild vollständig schwarz. Wenn der Wert 100 % beträgt, erfolgt keine Änderung am Bild. Andere Werte entsprechen linearen Multiplikatoreffekten. Werte über 100 % sind in Ordnung und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
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.
Graustufen (%)
Konvertieren Sie das Bild in Graustufen. Der Wert definiert den Umfang der Konvertierung. Bei einem Wert von 100 % wird das Bild vollständig in Graustufen umgewandelt, bei einem Wert von 0 % bleibt das Bild unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn nicht festgelegt, ist der Wert standardmäßig 0;
Beispiel 1:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>图片转为黑白色:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>Laufergebnisse:
Beispiel 2:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>
<p>图片使用高斯模糊效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>Laufergebnisse:
(Lernvideo-Sharing: CSS-Video Tutorial )
Beispiel 3:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>给图像设置一个阴影效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>Laufergebnisse:
Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie die Graustufen des Hintergrundbilds in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!