给网页添加灰度(黑白)滤镜效果

给网页添加灰度(黑白)滤镜效果

Scroll Down
<style>
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);
}
</style>

通过filter这个全局的 CSS 样式就能将整个网站变成灰色效果,其实就是一个滤镜的意思。

官方介绍如下:

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜,通过一个 URL 链接到 SVG 滤镜元素 (SVG filter element)。

更多用法可以参考MDN 的官方介绍