Webページを白黒にするCSS

Web ページ全体の色をグローバルに変更するには 3 つの方法があります。CSS で直接設定する方法、SVG フィルターを追加する方法、JS を介してすべてのタグを走査して色を変更する方法です。 。

1. css を直接設定します

スタイルを直接編集し、それを適用する必要があるクラス

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

を設定します (ビデオ チュートリアル: css ビデオ チュートリアル)

2. svg

最初に svg ファイルを作成します

<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>

css 呼び出し

filter: url(gray.svg#grayscale);

3.js traversal

Justコードを直接挿入してください。手で書くのは不可能です (ps: rgba と ! important は変更できません。その他はテストされていません)

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

js ソースがあまり良くないため、 Web ページの読み込みが遅すぎます。手動でダウンロードできます。ローカルの greyscale.js (F12 をクリックした後、[ネットワーク] タブに切り替え、Web ページを更新するとファイルが表示されます。右クリックして名前を付けて保存)

次にjs または jq を使用して

/*js调用*/
grayscale(document.getElementById("thisImage"));
/*jq调用*/
grayscale($("#thisImage"));

推奨チュートリアル: cssquickstart

以上がWebページを白黒にするCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。