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

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

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

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

MySQLデータベースの基礎知識と操作のまとめ

MySQL での置換例の詳細な説明

CSSの優先度を理解する2つの方法

MySQL InnoDB インデックス拡張の詳細な説明

Python Django アプリケーションを Docker 化する方法

jQueryはアコーディオンの小さなケースを実装します

iframe を使用して Web ページに他の Web ページを埋め込む方法

Vueのsync修飾子の詳細な説明

Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

CSS プロパティ display:flow-root 宣言を 1 つの記事でマスターする

推薦する

React refの使用例

MySQL は、ユーザーの作成、ユーザーの承認、ユーザー権限の取り消し、ユーザーパスワードの変更、およびユーザーの削除を行います (実用的なヒント)

泡の小さな鋭角効果を実現するCSS

HTML検証 HTML検証

MySQL 8.0.12 インストールグラフィックチュートリアル

vue+element カスタムクエリコンポーネント

vue.config.js パッケージ最適化構成

Mysql ファジークエリが大文字と小文字を区別するかどうかの詳細な調査

JavaScript マウスイベントのケーススタディ

JSはショッピングカート効果の単純な加算と減算を実装します

docker run後にコンテナがExited (0)と表示される問題を解決する

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

Linux システムで MySQL の文字セットを UTF8 に変更する手順

JavaがMySQL 8.0に接続できない問題の解決策