CSS スタイルを変更してグレーの Web ページ (色なし、明るい白黒のみ) を実現するいくつかの方法

通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人への哀悼の意を表すため、ウェブサイトの全ページをグレー（白黒）に変更します。そこで今日は、数行の簡単なコードでこの機能を実装する方法についてお話ししましょう。

今朝、あるネットユーザーが、ウェブサイト全体の色調をグレーと黒に変更したいと発言していました。これは過去に特定の日付を記念するために使用されたことを覚えていますし、123WORDPRESS.COM のウェブサイトでも使用されていました。当時は CSS を変更することで直接実現できたと記憶しています。それを必要とするユーザーがいるため、時間をかけて整理し、他にもっと良い方法があるかどうかを確認します。

実際のニーズに応じて適切な CSS コードスタイルを選択し、それを独自の Web ページテンプレートのコードに追加して、Web ページのグレー、黒、白のスタイルを実現できます。

まず、ウェブページの白黒コードスタイルA：CSSファイルを変更する

ウェブページのCSSファイルに次のCSSコードを追加して、ウェブページを白黒、つまりウェブサイトをグレーにすることができます。

CSSコード

ウェブページの白黒コードスタイル A

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

このコードウェブページの白黒コードスタイルBもお勧めです

<スタイル>
html{
-webkit-フィルター: グレースケール(100%);
-moz-filter: グレースケール(100%);
-ms-filter: グレースケール(100%);
-o-filter: グレースケール(100%);
フィルター:progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
_フィルター:なし;
}
</スタイル>

ここで、HEAD テンプレートにコードを追加して、サイト全体を実現できます。

2番目の方法: Webページの<head>タグに次のコードを追加します

CSS ファイルを変更したくない場合は、Web ページのヘッダーにある <head> タグ内にインライン CSS コードを追加して、Web サイトのページをグレー表示にすることができます。

コード

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

3番目の方法: <html> タグを変更してインラインスタイルを追加する

上記の 2 つの方法が気に入らない場合は、<html> タグを変更してインラインスタイルを追加し、Web ページをグレー表示する効果を実現できます。

コード

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

4番目:著者自身が使用したCSSコード

コード：

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

ここでは、実際のニーズに応じてコードを追加することを選択します。

PS: 上記の方法はすべて、CSS フィルターを通じてページの表示を制御します。唯一の違いは、CSS コードの呼び出し方法です。皆さん、好きな方を掘り出してください！

<<: Vueはマーキースタイルのテキストの水平スクロールを実装します

>>: MySQLシリーズのMariaDBサーバーのインストール