ボタンや写真など、サイト全体のコンテンツが灰色になっていることがわかります。現時点では、これがどのように行われるのか疑問に思うかもしれません。
すべてのコンテンツが一律に CSS スタイルに変更され、すべての画像がグレーに変更され、ボタンなどのスタイルも一律にグレースタイルに変更されたと考える人もいます。しかし、考えてみると、コストが高すぎます。また、特定のコントロールがグレースタイルを追加するのを忘れた場合、それは唐突すぎませんか。
実際、解決策は非常に単純で、数行のコードだけで完了します。参考資料を通じて、目標を達成するのに役立つ次の方法をまとめました。
この Web ページの色を灰色にする最も簡単な方法は、現在のページの css にあります。次のコードを追加して、どのブラウザーでも正しく実行されるようにします。

方法 1:

<style type="text/css">
html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>

filter はフィルターを意味し、filter:grayページにグレースケールフィルターを追加することを意味するため、html のすべてのコンテンツが白黒になります。-webkit-filter: grayscale(100%);ただし、このフィルターは chrome や safari ブラウザーでは無効なため、下にwebkit カーネルを使用するブラウザー専用の行があります. 意味はFILTER: gray;似ていますが、書き方が異なります.

方法 2:

次のコードは、Web ページを白黒に変えることができます. コードを CSS の先頭に追加して、単純な読み込みを実現します. Web サイトが CSS を使用していない場合は、Web ページテンプレートの HTML コードスタイルの間に挿入できます

<style>
html {
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 -webkit-filter: grayscale(100%);
}
</style>

ウェブサイトによっては、最新のウェブページ標準プロトコルを使用していないため、この css を使用できない場合があります。ウェブページの上部を次のコードに置き換えてください。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

また、FLASH アニメーションの色を CSS フィルターで制御できず、FLASH コードのとの間に挿入できる Web サイトもいくつかあります。

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

標準コードが与えられた場合、このコードを Web サイトページの css に追加して、ページを灰色に変える効果を実現します。

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:url("data:image/svg+xml;utf8,<svg 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>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}

元のリンク: https://blog.csdn.net/YOUYOU0710/article/details/105350655

ウェブサイトがすぐに灰色になるのはどうしてですか? 、数行のコードで完了です。

方法 1:

方法 2:

おすすめ