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

Heim

Web-Frontend

CSS-Tutorial

So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder

青灯夜游

Nov 09, 2021 pm 03:53 PM

css3图片滤镜

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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder" >
		<img  class="img lazy"  src="/static/imghwm/default1.png"  data-src="img/1.jpg"      style="max-width:90%" / alt="So ändern Sie Farbbilder in CSS3 in Schwarzweißbilder" >
	</body>
</html>

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!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

So viele FarblinksApr 13, 2025 am 11:36 AM

Es gab in letzter Zeit eine Reihe von Werkzeugen, Artikeln und Ressourcen über Farbe. Bitte erlauben Sie mir, ein paar Registerkarten zu schließen, indem Sie sie hier für Ihren Vergnügen zusammenrunden.

Wie automatische Margen in Flexbox funktionierenApr 13, 2025 am 11:35 AM

Robin hat dies schon einmal abgedeckt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person einen Stich gemacht hat, um es zu erklären, und ich wollte

Bewegliche Regenbogen unterstreichtApr 13, 2025 am 11:27 AM

Ich liebe das Design der Sandwich -Site. Unter vielen schönen Merkmalen befinden sich diese Schlagzeilen mit Regenbogenuntergründen, die sich beim Scrollen bewegen. Es ist nicht

Neues Jahr, neuer Job? Lassen Sie einen netzbetriebenen Lebenslauf machen!Apr 13, 2025 am 11:26 AM

Viele beliebte Lebenslaufdesigns machen den verfügbaren Seitenraum optimal, indem sie Abschnitte in Gitterform legen. Verwenden wir ein CSS -Netz, um ein Layout zu erstellen, das

Eine Möglichkeit, die Benutzer aus der Gewohnheit herauszubrechen, zu viel neu zu ladenApr 13, 2025 am 11:25 AM

Seiten -Nachladen sind eine Sache. Manchmal aktualisieren wir eine Seite, wenn wir der Meinung sind, dass sie nicht mehr reagiert, oder glauben, dass neue Inhalte verfügbar sind. Manchmal sind wir nur sauer auf

Domänengetriebenes Design mit ReactApr 13, 2025 am 11:22 AM

Es gibt nur sehr wenige Anleitungen zur Organisation von Front-End-Anwendungen in der Welt der Reaktionen. (Bewegen Sie einfach Dateien um, bis es sich „richtig anfühlt“, lol). Die Wahrheit

Erkennen inaktiver BenutzerApr 13, 2025 am 11:08 AM

Meistens kümmert es Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was vielleicht sie vielleicht