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

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

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

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

JavaScript スコープチェーンの基本原理のグラフィカルな説明

Kubernetes YAMLファイルの使用

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

TypeScript 2.0 マーク付き共用体型の詳細な説明

MySQL 全体または単一のテーブルデータのエクスポート

VMware 仮想マシンブリッジモードでインターネットにアクセスできない問題を解決する方法

Windows に Docker をインストールする詳細なチュートリアル

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

MySql のグループ化と各グループからランダムに 1 つのデータを取得する

既存のMySQLデータベースの文字セットを統一する方法

推薦する

nginx 設定の場所の概要の場所の通常の書き込みと書き換えルールの書き込み

Vue でのキープアライブコンポーネントの使用例

CSSのoutline-offsetプロパティを使用してプラス記号を実装する

Windows Server 2012 でデスクトップ上の一般的なアイコンを表示または非表示にする方法

Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析

MySQL のデバッグと最適化に関する 101 のヒントを共有する

MySQL シリーズ 8 MySQL サーバー変数

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Facebook 出会い系サイトデザインのユーザーエクスペリエンス分析

MySQLセグメンテーション関数substring()の具体的な使用法

ディスクを破壊せずに Linux で dd コマンドを使用する方法

Excelアップロード機能を実現するVue + iViewの完全コード

完全なMySQL学習ノート

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法