Webページを白黒にするCSS

王林
リリース: 2020-05-12 09:19:22
転載
4563 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート