ウェブサイトを灰色にする

2020年4月4日土曜日、清明祭|追悼の日。

私たちの国は非常に苦しい瞬間を経験し、多くの英雄が他者を救うために倒れ、多くの殉教者と英雄が人々の安全と死を擁護しました。今日、国旗は半分に引き下げられ、10時の北京で3分間の国民の沈黙は英雄に敬意を表するためです。同時に、ライブ放送、バラエティショー、映画、ゲームなど、すべてのパブリックエンターテインメント活動は本日終了します。

私はまた、ニュー冠状動脈性肺炎の流行に対する国の戦いで亡くなった殉教者と亡くなった同胞に深い哀悼の意を表し、戦争の最前線にいるすべての仕事と医療関係者に敬意を表します。私たちの前には英雄の壁があります。

ウェブサイトがグレー表示される

今日、Baidu、Bステーション、iQiyi、CSDNなど、ホームページやコンテンツを含む多くのWebサイトが灰色になっていることがわかります。

CSDN

IQiyi

百度

ボタンや写真など、サイト全体のコンテンツが灰色になっていることがわかります。現時点では、これがどのように行われるのか疑問に思われるかもしれません。

すべてのコンテンツがCSSスタイルに置き換えられ、画像が灰色に置き換えられ、ボタンやその他のスタイルが灰色のスタイルに置き換えられたと考える人もいます。しかし、考えてみると、コストが高すぎて、コントロールが灰色のスタイルを追加し忘れていると、目立ちすぎませんか。

実際、解決策は単純であり、それを実行するのに数行のコードしか必要としません。

達成する

ステーションBなどのWebサイトを選択して、ブラウザー開発者ツールを開きます。

Webページのソースコードを調べると、htmlのこの部分に疑わしいクラス（灰色）があり、灰色は中国語で灰色であることがわかります。

灰色化効果

そのCSSコンテンツは次のとおりです。

html.gray {    -webkit-filter: grayscale(.95);}

キャンセルすると、ウェブサイトの色を元に戻すことができます。

復元効果

案の定、このスタイルは機能しており、htmlノードに作用しているため、グローバルな効果です。

CSDNも見てください。このCSSスタイルも使用されており、その内容は次のとおりです。

html {    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

この実装はより互換性があるようです。

したがって、グローバルCSSスタイルがWebサイト全体を灰色の効果に変えることができると判断できます。

分析

ここでは、これがどのようなCSSスタイルであるかを詳しく見ていきます。

このスタイル名はフィルターと呼ばれ、MDNの公式紹介を検索します。リンクはhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/filterです。

正式な紹介は次のとおりです。

filter CSSプロパティは、ぼかしやカラーシフトなどのグラフィック効果を要素に適用します。フィルターは通常、画像、背景、境界線のレンダリングを調整するために使用されます。

CSS標準には、事前定義された効果を持ついくつかの関数が含まれています。SVGフィルターを参照し、URLを介してSVGフィルター要素[SVGフィルター要素[1]）にリンクすることもできます。

実際、これはフィルターを意味します。

公式にはデモがあり、図のように効果を確認できます。

デモ

たとえば、画像、色、ぼかし、コントラストなどがフィルタースタイルによって変更されます。

すべての使用例は次のとおりです。

/* URL to SVG filter */filter: url("filters.svg#filter-id");
/* <filter-function> values */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);
/* Multiple filters */filter: contrast(175%) brightness(3%);
/* Global values */filter: inherit;filter: initial;filter: unset;

さまざまな使用法の紹介については、公式ドキュメントを参照できます：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

たとえば、ぼかしを使用してガウスぼかしを設定できる場合、使用方法は次のとおりです。

filter: blur(radius)

画像にガウスぼかしを設定します。半径値は、ガウス関数の標準偏差、または画面上で融合されるピクセル数を設定するため、値が大きいほどぼかしが大きくなります。設定値がない場合、デフォルトは0です。このパラメーターは絶対ピクセル値を設定できますが、許容されませんパーセント値。

この効果は達成することができます：

効果

さて、ここでグレー画像についてお話ししましょう。実際、ここではグレースケールが設定されており、その使用法は次のとおりです。

filter: grayscale(percent)

画像をグレースケール画像に変換します。値は、変換のスケールを定義します。パーセント値は100％で、完全にグレースケールイメージに変換されます。値は0％で、イメージに変化はありません。0％から100％の値は、エフェクトの線形乗数です。設定しない場合、値はデフォルトで0になります。パーセンテージを渡すことに加えて、浮動小数点数も渡すことができ、効果は同じです。

など：

filter: grayscale(1)filter: grayscale(100%)

すべてのノードを100％グレースケールモードに変換できます。

したがって、ここではすべてが明確です。サイト全体を灰色にして、各ブラウザの互換性のある書き込みを検討する場合は、CSDNの書き込みを参照できます。

.gray {    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

このようにして、グレー表示したいノードはグレークラスを追加するだけでよく、たとえば、htmlノードに追加すると、ステーション全体をグレー表示できます。

最後に、図に示すように、ブラウザーとフィルタースタイルの互換性を確認します。

互換性

ここでは、IEに加えて、PCや携帯電話の他のブラウザーがサポートされていること、FirefoxのPCやAndroidも安全に使用できるようにSVG画像を個別にサポートしています。

まとめ

この記事では、今日観察されたWebの灰色化の実装を簡単に紹介し、フィルターのより詳細な使用法についても学びます。