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

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

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

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

vue プロジェクトで rem を使用して px を置き換える例

Linux は、ディレクトリが存在するかどうかを判断するために if を使用します。

Linux での NTP サーバー設定の詳細な手順

2つのLinuxサーバー間でファイルとフォルダを転送する手順

VMware Workstation のインストール Linux (Ubuntu) システム

XHTML タグのネスト規則の分析

リモートDockerを使用した統合テスト環境の構築手順

Vueはデータを初期状態にリセットします

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Windows システムで MySQL が起動しない場合の一般的な解決策

推薦する

FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

crontab 実行時間とシステム時間の不一致の解決方法

HTMLドロップダウンメニューを送信した後、デフォルト値に戻るのではなく、選択した値が保持されます。

MySQLとSpringの自動コミットの詳細な説明

Linux の一般的なハードディスク管理コマンドの紹介

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

MySQL の if 関数の正しい使い方の詳細な説明

Linux で MySQL データベースのデータファイルパスを変更する手順

Alibaba Cloud Linux CentOS 7.2 で自作 MySQL のルートパスワードを忘れた場合の解決方法

シンプルなウェブ計算機を実装するJavaScript

Tomcat でタイムアウトしたセッションを監視および削除する方法

Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル

JavaScript の重要なブレークポイントデバッグ手法の概要 (推奨)

ウェブページ作成に役立つコード

Vueはクリックを実装し、イベントオブジェクトとカスタムパラメータを同時に渡します。