CSS一行だけでサイトを白黒にする

結論

filter: grayscale(1)

ページ全体に設定を適用したい場合はhtmlタグの中に書きます。

<style>
html {
  filter: grayscale(1);
}
</style>

解説

CSSのfilterフィルタープロパティを使うと、画像にフィルターをかけることができます。

grayscaleグレースケールは画像をモノクロにしたいときに使います。0%が元の状態で、50%だと半分程度、100%で完全にモノクロになります。

サンプルコード

.img {
  filter: grayscale(50%);
}

表示例

元の画像

grayscale(50%)

grayscale(1)

なぜこんなことをするの？

中国では、災害や死去により哀悼の意を示すため、ほぼすべての本土メディアがトップページをモノクロに切り替えことがあります。

xoslotzทางเข้า より:

10月 11, 2024 11:57 pm

I loved as much as you’ll receive carried out right here.
The sketch is tasteful, your authored material stylish.
nonetheless, you command get got an edginess over that you wish be delivering the following.
unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this increase.

返信