Konvertieren Sie das Bild mithilfe von CSS in Schwarzweiß

Mit der Entwicklung der Zeit, mit der schrittweisen Weiterentwicklung von CSS3, haben wir auch begonnen, die Möglichkeit einer groß angelegten Anwendung des „Schwarz-Weiß-Effekts“ in der Praxis zu erkennen. Als nächstes werden wir die Implementierung von vorstellen Interessierte Freunde können mehr erfahren Sie wussten vielleicht schon lange, dass es in schlechten Zeiten wie Wenchuan einfach war, eine Website unter IE komplett grau zu machen (Filter: grau;). Allerdings hatten andere Browser zu dieser Zeit keine Lösung. Mit der Entwicklung der Zeit und nun mit der schrittweisen Weiterentwicklung von CSS3 haben wir jedoch auch begonnen, die Möglichkeit einer groß angelegten Anwendung des „Schwarz-Weiß-Effekts“ in der Praxis zu erkennen.

CSS3-Graustufenfilter-Implementierung
Der folgende Testcode:

Der Code lautet wie folgt:

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

HTML-Code:

Der Code lautet wie folgt:

<img src="mm1.jpg" /> 
<img src="mm1.jpg" class="gray" />

Wenn Ihr Browser Chrome18+ ist, können Sie hier klicken: CSS3-Graustufenfilter und Foto schwarz-weiß⤴
Sie können das Schwarz-Weiß-Kontrasteffektbild am Anfang eines ähnlichen Artikels sehen.
Andere Browser wie Firefox werden bald folgen. Natürlich ist es auch möglich, den Effekt zu erzielen, Fotos beispielsweise im Firefox 4-Browser in Schwarzweiß umzuwandeln. Sie können den Graustufenfiltereffekt von SVG nutzen.
SVG-Filterimplementierung
Wir erstellen eine neue leere Textdatei, zum Beispiel: grey.txt Kopieren Sie den folgenden XML-Code:

Der Code lautet wie folgt:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="grayscale"> 
<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>

Ändern Sie dann das Suffix .txt → .svg. Dann können Sie es aufrufen~~

Der folgende CSS-Aufrufcode:
filter : url(gray .svg#grayscale);Dann kommt der Effekt zum Vorschein. Wenn Ihr Browser FireFox4+ ist, können Sie hier klicken: SVG-Filter zum Erzielen einer Schwarzweißfoto-Demo⤴
Vergessen Sie nicht den IE-Browser
Die Implementierung unter IE wurde oben erwähnt :
Filter: grau; mindestens IE7~9 unterstützt es. Ich war in letzter Zeit zu faul, IE6 zu testen, daher weiß ich nicht, ob es unterstützt wird oder nicht. Erfahrungsgemäß sollte es unterstützt werden.
Ich brauche eine Möglichkeit, das Land zu vereinen
Um das Land zu vereinen (vollständig kompatibel), können Sie es nur tun, wenn Sie CSS verwenden möchten: Nehmen Sie eine Angelrute und gehen Sie angeln jeden Tag, Jahr für Jahr, Tag für Tag im Huangpu-Fluss ... Dann, zwei Jahre später, bis zu zwei Jahre, F5 auf den beiden Demoseiten oben, das war's! Es ist ganz einfach!
Wenn Sie der Meinung sind, dass der obige Ansatz zu sehr auf London basiert und Sie nicht einig sind, gibt es eine Möglichkeit, die Welt zu vereinen, aber es ist kein CSS, sondern Greyscale.js, das einigermaßen berühmt zu sein scheint .
Die Verwendung ist sehr einfach. Zitieren Sie die JavaScript-Datei wie folgt:
Dann ein Satz Wörter:
grayscale(document.getElementById("thisImage")); oder DOM element set:
grayscale(document.getElementsByTagName("img")); Verwenden Sie auch:
greyscale($("#thisImage")); Es ist sehr einfach.
Implementierungsprinzip: Der Graustufenfilter wird im IE-Browser hinzugefügt, das weiß jeder. Andere Browser scheinen die getImageData-Methode in Canvas zu verwenden und führen dann eine Graustufenkonvertierung für jedes Pixel durch. Daher weist diese Methode unter modernen Browsern zwei Einschränkungen für die Graustufenverarbeitung von Bildern auf:
1. Es dauert ein paar Sekunden, bis dieses durchschnittlich große Bild 300*300 grau wird
2. Sicherheitsmechanismus, domänenübergreifende Bilder können nicht in Schwarzweiß konvertiert werden.

Das obige ist der detaillierte Inhalt vonKonvertieren Sie das Bild mithilfe von CSS in Schwarzweiß. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!