CSSは画像のグレースケール効果を実現し、さまざまなブラウザと互換性があります

この章では、css を使用して画像にグレースケール効果を実現する方法を紹介します。css は 360 ブラウザなどのさまざまなブラウザと互換性があります。一定の参考値があるので、困っている友達は参考にしていただければ幸いです。

css は、css スタイルを通じてカラー画像をグレーに表示することで画像のグレースケール効果を実現します。これは、画像のカラー モードをグレースケールに調整するのと同じです。css は次の方法でグレースケール効果を実現できます。

方法 1. ie フィルタ

img { filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); } //标准写法
img { filter:gray; } //简写

ie シリーズのブラウザすべて この属性の ie フィルタはサポートされていますが、ie 以外のブラウザはサポートしていません。

方法 2. css3 フィルター

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

css3 フィルターはまだ標準属性ではありません。現在、これらは google chrome でのみサポートされており、他のブラウザではサポートされていません。

css によって実現されるグレースケール効果により、web ページに特殊効果を簡単に実装できます。忘れずに覚えておいてください。 5.12 の大イベント. 地震の影響で、多くの国内 web ページが一夜にして灰色に変わりましたか?これは、web サイトに次のスタイルを追加することで簡単に実現できます:

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

css のグレースケール効果は優れていますが、すべてのブラウザと互換性があるわけではない、と誰かが言ったはずです。私はします？ ？ css で何もできない場合は、js を使用してそれを実現することを考えるでしょう。ここでは js グレースケール効果プラグインをお勧めします。

grayscale .jsstrong>

使用方法:

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

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

すべてのブラウザと互換性があり、実行後に多くのインライン スタイルが要素に追加されます。互換性の要件があるため、css を使用してグレースケール度の効果を実現することをお勧めします。