默哀日网站置灰

lvcal_sunday

于 2022-12-06 14:24:06 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

分类专栏：杂七杂八文章标签： html5

本文链接：https://blog.csdn.net/lvcal_sunday/article/details/128201816

杂七杂八专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种通过CSS样式实现网页灰度显示的方法。具体实现是通过对HTML元素应用多种浏览器前缀的grayscale滤镜属性来达到效果。适用于希望快速为网站添加视觉调整功能的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以csdn官网为例，关键代码启用与否效果对比如下
在这里插入图片描述

实现方式就是给html(或者body)添加style样式：

	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);
    filter:gray;