CSS erzielt einen Bild-Graustufeneffekt und ist mit verschiedenen Browsern kompatibel

In diesem Kapitel erfahren Sie, wie Sie mithilfe von CSS den Graustufeneffekt von Bildern erzielen. Es ist mit verschiedenen Browsern wie dem 360-Browser kompatibel. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

CSS erzielt den Graustufeneffekt von Bildern, indem es Farbbilder durch CSS-Stile grau erscheinen lässt. Dies entspricht der Anpassung des Farbmodus eines Bildes an Graustufen. CSS kann durch die folgenden Methoden Graustufeneffekte erzielen.

Methode 1. IE-Filter

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法
img { filter:Gray; } //简写

Browser der IE-Serie unterstützen alle dieses Attribut des IE-Filters, Nicht-IE-Browser. Der Server unterstützt dies unterstütze es nicht.

Methode 2. CSS3-Filter

img { -webkit-filter: grayscale(100%); }

Der CSS3-Filter ist noch kein Standardattribut und derzeit nur bei Google verfügbar Unterstützt vom Chrome-Browser, aber nicht von anderen Browsern

Der CSS-Graustufeneffekt kann die Implementierung einiger Spezialeffekte auf Webseiten erleichtern. Erinnern Sie sich noch daran, dass viele inländische Webseiten zum Gedenken an 5.12 über Nacht grau wurden? Erdbeben? Dies kann leicht erreicht werden, indem der Website die folgenden Stile hinzugefügt werden:

html { filter:Gray; -webkit-filter: grayscale(100%); }

Jemand muss gesagt haben, dass der Graustufeneffekt von CSS zwar gut ist, aber nicht mit allen Browsern kompatibel sein sollte Ich tue? ? Wenn Sie mit CSS nichts anfangen können, werden Sie auf jeden Fall darüber nachdenken, JS zu verwenden, um dies zu erreichen. Hier empfehle ich ein JS-Graustufeneffekt-Plugin:

grayscale.js

Verwendung:

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

//调用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( &#39;body&#39; );
        grayscale( el );
    };
</script>

Kompatibel mit allen Browsern, viele Inline-Stile werden nach der Ausführung zu den Elementen hinzugefügt. Wenn Sie keine hohen Anforderungen an die Kompatibilität haben, Es wird empfohlen, CSS zu verwenden, um einen Graustufeneffekt zu erzielen.