Verwenden Sie CSS3, um Graustufenfilter zu schreiben, um Schwarzweiß-Fotoeffekte zu erstellen

In diesem Artikel wird hauptsächlich die Methode zum Schreiben von Graustufenfiltern zum Erstellen von Schwarzweiß-Fotoeffekten vorgestellt. Der Artikel stellt auch die Methode vor, die mit IE kompatibel ist dazu

Die Filterfunktion in CSS3 ermöglicht es uns, Bilder einfach und bequem zu verarbeiten, ohne PhotoShop oder viele JavaScript- und PHP-Codes zu verwenden. Diese Eigenschaft wird bereits von den neueren Browsern Firefox, Safari und Chrome unterstützt, und wir können diesen Effekt durch umfassende alternative Technologien simulieren – sogar IE-Browser.

In diesem Artikel verwenden wir das Standardtestbild von Lena Söderberg (Anmerkung des Übersetzers: Lenas wunderschönes Foto wird als Standardtestbild für die Bildkomprimierung verwendet) als Demonstration und konvertieren es mithilfe von CSS in Schwarz und weißes Bild. Im Folgenden erkläre ich, wie Sie diese CSS-Funktion verwenden, um Farbton, Unschärfe, Helligkeit, Kontrast und einige andere Effekte anzupassen. Rendering:

CSS3-Graustufenfilter

Die Verwendung von CSS3 zum Verdünnen der Farbe eines Bildes könnte nicht einfacher sein. Wir können diese CSS-Anweisung als Klasse schreiben, sodass wir direkt eine Klasse hinzufügen können, wenn wir auf ein Bild mit dem gewünschten Effekt stoßen.

img.desaturate { filter: grayscale(100%); }

Wenn aktuelle Browser CSS3 verwenden, müssen sie natürlich ihre eigenen experimentellen Präfixe für Browserfunktionen hinzufügen. Daher müssen wir als Erstes das Browser-Präfix schreiben:

img.desaturate { filter: grayscale(100%);   
-webkit-filter: grayscale(100%);   
-moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%);   
-o-filter: grayscale(100%);   
}

Das ist es Es ist ganz einfach, es auf ein bestimmtes Bild anzuwenden. Fügen Sie einfach eine Klasse hinzu:

<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>

Das ist es. ## Fügen Sie einen SVG-Filtereffekt hinzu. Diese Funktion ist derzeit nur in Chrome 18+ verfügbar und andere Browser werden bald Unterstützung hinzufügen. Um den gleichen Effekt in Firefox 4+ zu erzielen, müssen wir möglicherweise SVG-Filter verwenden. Ich habe eine neue separate Datei saturate.svg mit dem folgenden Code erstellt:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">   
<filter id="greyscale">   
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 
0  0  0  1 0"/>   
</filter>   
</svg>

Lassen Sie sich von diesem SVG-Code nicht einschüchtern – auch wenn die obige Matrixsequenz etwas kompliziert ist. Ich empfehle Ihnen, diesen Code zu kopieren und direkt in eine gemeinsame „kleine Datei“ einzufügen. Ich werde einen weiteren Artikel schreiben, um die oben genannten Matrixänderungen im Detail vorzustellen, daher werde ich hier nicht auf Details eingehen. Mit der obigen SVG-Dateireferenz lautet der CSS-Code, den wir in die HTML-Seite einfügen möchten, wie folgt:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
}

Kompatibel mit IE:

Bisher Unser Code ist mit zukünftigen Browsern und den neuesten Versionen von Chrome und Firefox 4+ kompatibel. Um IE 6-9 zur Kompatibilitätsliste hinzuzufügen, müssen wir den umständlichen, aber effektiven Filter von Microsoft verwenden:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
filter: gray;   
}

Wenn Sie die alte Version des Webkit-Kernel-Browsers weiterhin kompatibel machen möchten:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
filter: gray;   
-webkit-filter: grayscale(1);   
}

Wenn Sie diesen visuellen Effekt in allen Browsern erzielen möchten (vorausgesetzt, Ihre Besucher unterstützen JavaScript), können Sie Ihr Bild mit jQuery oder Greyscale.js ändern, um es zu entfärben.

Der CSS-Code, den wir oben geschrieben haben, ermöglicht es uns, das Bild ohne Verwendung von PhotoShop in Schwarzweiß umzuwandeln. Die Implementierung dieser Funktion mithilfe von CSS lässt sich sehr einfach ändern: Wenn wir beispielsweise den Entfärbungsparameter von 100 % auf 50 % ändern, sieht das Bild wie eine Mischung aus Primärfarben und Schwarzweiß aus.

Andere Effekte:

Darüber hinaus können Schwarzweißfotos einige andere Filtereffekte hinzugefügt werden:

-webkit-filter:blur(5px);  //模糊，此处为5像素   
-webkit-filter:sepia(0.5);  //叠加褐色，取值范围0-1，此处表示50%的褐色   
-webkit-filter:brightness(0.5);  //亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的是100%亮度，无法看到图片）   
-webkit-filter:hue-rotate(30deg); //色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜   
-webkit-filter:invert(1);  //反色，取值范围0-1,0为原图，1为彻底反色之后，0.5为灰色   
-webkit-filter:saturate(4);  //饱和度，取值范围0~*,0为无饱和度，1为原图，值越高饱和度越大   
-webkit-filter:contrast(2);  //对比度，取值范围0~*,0为无对比度（灰色），1为原图，值越高对比度越大   
-webkit-filter:opacity(0.8);  //透明度，取值范围0~1,0为全透明，1为原图   
-webkit-filter:drop-shadow(17px 17px 20px black); //阴影

Das Obige ist der gesamte Inhalt Ich hoffe, dass dieser Artikel für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

CSS zur Erzielung eines dreidimensionalen horizontalen Schaltflächenmenüeffekts

Verwendung CSS3 Realisieren Sie den 3D-Flipbook-Effekt

Dynamischer CSS3-Eingabeaufforderungseffekt, wenn die Maus in das Bild bewegt

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Graustufenfilter zu schreiben, um Schwarzweiß-Fotoeffekte zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!