Einführung in die Verwendung von CSS3 zum Schreiben von Graustufenfiltern zum Erstellen von Schwarzweiß-Fotoeffekten

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 viel JavaScript oder PHP-Code 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. Was wir also zuerst tun müssen, ist einfach das zu schreiben Browser-Präfix:

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

Wenn Sie es für ein bestimmtes Bild verwenden möchten, ist es sehr einfach, 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);   
}

Für IE-Kompatibilität:

Jetzt ist unser Code 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 weiterhin die ältere Version verwenden möchten der Webkit Core-Browserkompatibilität:

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 jQuery oder Greyscale.js, um Ihr Bild zu ändern, um es zu entfärben.

Der CSS-Code, den wir oben geschrieben haben, ermöglicht es uns, das Bild in Schwarzweiß umzuwandeln, ohne PhotoShop zu verwenden. Mithilfe von CSS lässt sich diese Funktion sehr leicht modifizieren: Wenn wir beispielsweise den Entfärbungsparameter von 100 % auf 50 % ändern, sehen Sie, dass das Bild den Effekt einer Mischung aus Primärfarben und Schwarzweiß hat.

Weitere Effekte:

Darüber hinaus können Schwarzweißfotos einige weitere 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 detaillierte Inhalt vonEinführung in die Verwendung von CSS3 zum Schreiben von Graustufenfiltern zum Erstellen von Schwarzweiß-Fotoeffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!