ウェブサイトはグレー表示されています。画像を含む互換コードはすべてのブラウザをサポートしています

通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そこで、いくつかの方法を紹介します

1. 本文にコードを追加するだけ

この効果を実現するのは非常に簡単です。必要なのは、CSS コード 1 つだけです: filter: grayscale(100%); これを body 要素のスタイルに挿入します。私たち自身が達成した効果：

2. 呼び出された CSS スタイルファイルに直接記述されるため、HTML コードを変更する必要はありません。

コード上で直接:

/*ウェブサイトが灰色になる*/
html {-webkit-filter: グレースケール(100%);-moz-filter: グレースケール(100%);-ms-filter: グレースケール(100%);-o-filter: グレースケール(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}

またはコードをダウンロードしてください。上記のコードをお勧めします

コードをコピー

コードは次のとおりです。

html{
-webkit-フィルター: グレースケール(100%);
-moz-filter: グレースケール(100%);
-ms-filter: グレースケール(100%);
-o-filter: グレースケール(100%);
フィルター: グレースケール(100%)
フィルター: 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.3333 0.3333 0.3333 0 0 0.3333 0.3333 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#grayscale");
フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
}

3. テンセントのアプローチ：

<スタイル>
体 *{
-webkit-filter: グレースケール(100%); /* webkit */
-moz-filter: グレースケール(100%); /*firefox*/
-ms-filter: グレースケール(100%); /*ie9*/
-o-filter: グレースケール(100%); /*オペラ*/
フィルター: グレースケール(100%)
フィルター:progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1); 
フィルター:グレー; /*ie9- */
}
</スタイル>

その他の方法:

1. ウェブページの外部スタイル白黒コード（記述には *.css ファイルを使用してください）

html{
フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
-webkit-フィルター: グレースケール(100%);
}

2. ウェブページの白黒コードの内部スタイル（headタグ内に記述）

<スタイル タイプ="text/css">
<!--
html{
フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
-webkit-filter: グレースケール(100%);}
-->
</スタイル>

3. ウェブページのインライン白黒コード（HTMLタグを記述し、HTMLを検索）

<html スタイル="フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール = 1);
-webkit-filter: グレースケール(100%);">

これは、123WORDPRESS.COM の編集者が収集したコードです。シンプルで実用的なので、皆さんのお役に立てれば幸いです。

<<: HTML を使用して IE8 および IE9 の互換表示モードを無効にするヒント

>>: MySQL シリーズ 13 MySQL レプリケーション

SQLはROW_NUMBER() OVER関数を使用してシーケンス番号を生成します。

ウェブサイトはグレー表示されています。画像を含む互換コードはすべてのブラウザをサポートしています

SQLはROW_NUMBER() OVER関数を使用してシーケンス番号を生成します。

Linux sedコマンドの使用

nginx を使用した負荷分散モジュールの解釈

あなたのウェブサイトはIE8に適していますか?

MySQL データベース内の同じテーブルを同時にクエリして更新する方法

URLエスケープエンコーディングの特殊文字に基づいて

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

IDEA で MySQL にリンクするとエラー 08001 が発生し、接続に成功した後にテーブルが表示されない問題と解決策

なぜCSSをヘッドタグに配置する必要があるのか

JavaScript の for/of、for/in の詳細な紹介

推薦する

Node.js のイベントモジュールに関する知識ポイントのまとめ

JS はシンプルな todoList (メモ帳) 効果を実装します

MySQL DATE_FORMAT関数の使用

tdコンテンツは自動的にテーブルを折り返します。幅を設定すると、テキストが自動的に折り返されます。

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

Filebeat を使用して Nginx ログを収集する方法

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

Linux でユーザーアカウントをロックおよびロック解除する 3 つの方法

vue3とvue2の利点の比較

MySQL の結合テーブルにインデックスを作成する方法

シンプルな時計を実装するJavaScript

Dockerはコンテナポートバインディングのローカルポートを実装します

MySQL ストレステストツールの使い方

JS を使用して航空機戦争の小さなゲームを実装する

CentOS7.5 の MySQL8.0.19 のインストールチュートリアルの詳細な手順