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

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

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 レプリケーション

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

ドメイン名を nginx サービスにバインドする方法

js での typeof の使い方を理解するための記事

MySQLアラームの詳細な分析と処理

MySQL の垂直テーブルを水平テーブルに変換する方法と最適化のチュートリアル

Vue 仮想 DOM クイックスタート

MySQL をデプロイするときに発生する「テーブル mysql.plugin が存在しません」という問題の解決方法

CentOS での mysql5.7 の詳細なインストールと設定のチュートリアル

MySQL でのバイナリ型操作

Vueでのバスの使用に関する詳細な説明

nginx + php の「入力ファイルが指定されていません」の解決策

推薦する

高品質なコードを書く Web フロントエンド開発実践書の抜粋

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

MySQL アカウント情報をエレガントにバックアップする方法

測定画像HTTPリクエスト

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル（MAC）

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

CSS3 を使用した SVG パスストロークのアニメーション化入門チュートリアル

MySQLでインデックスエラーが発生する状況について簡単に説明します

mysql 5.7.18 winx64 無料インストール設定方法

JavaScriptイベント実行メカニズムの深い理解

HTMLでカメラを読み込む方法

透明な入力ボックスにアイコンを追加する HTML コード

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

LinuxでSVNサーバーを構築する方法