公祭日网页灰色效果

默哀

首先公祭日默哀。。。。

---

网页灰色效果

百度百科在有人去世会把搜索信息页面灰化，今天访问b站的时候发如今公祭日这一天b站也全站灰化，各网站都以一种互联网的风格来哀悼死者。

哀悼的同时给你们顺便讲下全网站灰色化的实现。

filter(滤镜)

用法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

说明：

• none: 默认值。
• blur(): 给图像设置高斯模糊。
• brightness(): 给图片应用一种线性乘法，使其看起来更亮或更暗。
• contrast(): 调整图像的对比度。
• drop-shadow(): 给图像设置一个阴影效果
• grayscale(): 将图像转换为灰度图像。
• hue-rotate(): 给图像应用色相旋转。
• invert(): 反转输入图像。
• opacity(): 转化图像的透明程度。
• saturate(): 转换图像饱和度。
• sepia(): 将图像转换为深褐色。
• url(): URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且能够包含一个锚点来指定一个具体的滤镜元素。

兼容性

网站灰色实现

使用 grayscale 来实现效果。

能够设置 grayscale(100%); 来图像转换为灰度图像。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
复制代码

展现效果对比

正常页面

灰色化后页面

图片

也能够单独给图片设置灰色效果

img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
复制代码

最后

愿逝者安息