So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder-CSS-Tutorial-php.cn

So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder

青灯夜游

Freigeben： 2021-11-09 15:55:42

Original

2592 Leute haben es durchsucht

In CSS3 können Sie das Filterattribut verwenden, um Farbbilder in Schwarzweißbilder umzuwandeln. Sie müssen nur den Wert dieses Attributs auf „Graustufen(%)“ setzen (100 %) }".

So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS3 können Sie das Filterattribut verwenden, um Farbbilder in Schwarzweißbilder umzuwandeln. Sie müssen nur den Wert dieses Attributs auf „Graustufen(%)-Attribut“ setzen ist definiert Der visuelle Effekt (z. B. Unschärfe, Sättigung, Graustufen) des Elements (normalerweise So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder ).

Graustufen(%): Konvertieren Sie das Bild in ein Graustufenbild. 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. filter 属性定义了元素(通常是 So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder )的可视效果(例如：模糊、饱和度、灰度)。

grayscale(%)

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img{filter:grayscale(100%)}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder" >
		<img  src="img/1.jpg"    style="max-width:90%" class="img"/ alt="So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder" >
	</body>
</html>

Nach dem Login kopieren

Rendering:

So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder

(Teilen von Lernvideos:

CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo ändern Sie Farbbilder in CSS3 in Schwarzweißbilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!