サイト全体を灰色にするCSSコードのまとめ

国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼の意を表すため、2020年4月4日（明日）に国家追悼行事を開催することを決定し、公告を出した。この間、国内および海外の大使館では半旗が掲げられ、全国的に娯楽活動が中止され、4月4日午前10時から国民は3分間の黙祷を捧げ、車、列車、船舶は警笛を鳴らし、防空警報が鳴らされた。

以前、黙祷の日にサイトを訪問した際にサイト全体が灰色に変わったことを考えると、すぐに開発やデザイン修正に着手すると、多くの時間とエネルギーを消費することになると思いました。すべての要素を直接処理して灰色にできるCSSはないでしょうか？そこでCSS3フィルターを思いつき、このアイデアの実現可能性も確認できました。

フィルタ:グレースケールは要素のグレースケール値を調整できます

.グレーフィルター{
    フィルター: グレースケール(100%)
    -webkit-フィルター: グレースケール(100%);
    -moz-filter: グレースケール(100%);
    -ms-filter: グレースケール(100%);
    -o-filter: グレースケール(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\'/></filter></svg>#grayscale");
    フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
    -webkit-フィルター: グレースケール(1);
}

実際の戦闘

ステーション B を例に挙げます。

通常、ステーション B のナビゲーションバーは下にスライドした後、ページの上部に固定されます。

しかし、この CSS を body に追加すると、次のようになります。

ページの上部に固定されておらず、画面の外に出ていることがわかります。画面の左下隅にある小さなテレビ男も、ページの上部に移動しました。なぜこのようなことが起こるのでしょうか?

関連情報を調べるために Google にアクセスしたところ、次のことがわかりました。

フィルタースタイルが指定され、その値が none でない場合、スタイルが適用された要素の子要素の中に位置が absolute または fixed の要素があると、これらの要素に対して新しいコンテナーが作成され、これらの絶対位置または固定位置の要素の位置付けベンチマークは、新しく作成されたコンテナーを基準としたものになります。

fixed は HTML のルートコンテナーを基準に配置されていると推測できます。body にフィルターが設定されている場合は、新しい配置参照が作成されます。ページがスクロールすると、body は画面からスクロールアウトし、body 内のすべての子孫要素が fixed になっているため、予期しない効果が発生します。

どうすれば解決できるでしょうか?

解決策1

サイト全体に影響する方法：ルート要素の html にこのスタイルを適用できます。新しい配置参照要素が作成されても、子孫要素に予期しない影響を与えることはありません。

html{
    フィルター: グレースケール(100%)
    -webkit-フィルター: グレースケール(100%);
    -moz-filter: グレースケール(100%);
    -ms-filter: グレースケール(100%);
    -o-filter: グレースケール(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\'/></filter></svg>#grayscale");
    フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
    -webkit-フィルター: グレースケール(1);
}

効果：

解決策2

サイト全体がグレー表示されていない場合は、フィルターを使用する必要がある要素を個別に追加できます。

<html>
    <本文>
        <div class="gray-filter"></div>
    </本文>
</html>

<スタイル>
。修理済み {
    位置: 固定;
    上: 100px;
    左: 100px;
    高さ: 100px;
    幅: 100ピクセル;
    背景色: #f00;
}
.グレーフィルター{
    フィルター: グレースケール(100%)
    -webkit-フィルター: グレースケール(100%);
    -moz-filter: グレースケール(100%);
    -ms-filter: グレースケール(100%);
    -o-filter: グレースケール(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\'/></filter></svg>#grayscale");
    フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
    -webkit-フィルター: グレースケール(1);
}
</スタイル>

サイト全体をグレーアウトさせる CSS コードまとめの記事はこれで終わりです。サイト全体をグレーアウトさせる CSS に関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Clickhouse Docker クラスターの展開と構成を例を使って説明します

>>: MySQL シリーズ 3 基礎