css3 灰色滤镜-CSS3学习与总结·滤镜1秒让个人网站红系列

CSS3学习与总结·滤镜1秒让个人网站红系列

2021年12月13日是第八个国家公祭日，悼念血与火浸染的地方，祭奠抗战死难者。 铭记历史，哀悼先辈。 本文将介绍利用CSS3的filter属性让个人网站一秒变红的具体方法。

CSS3神奇滤镜

过滤属性

定义：过滤器属性定义元素（通常

）视觉效果（例如模糊和饱和度）。

灰度(%)值：将图像转换为灰度图像。 该值定义了转换的规模。 如果值为100%，图像将完全转换为灰度，如果值为0%，图像将保持不变。 0% 到 100% 之间的值是治疗效果的线性乘数。 如果未设置，则该值默认为 0。

黑色系列实施

将过滤器属性设置为 html 元素

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

提示：可以给body元素添加一个filter属性，确实可以达到同样的效果，而且如果页面中存在固定固定定位的元素或内容，就会出现定位失败的问题，所以建议直接在html元素中添加filter属性。

就这么简单，网站一下子变成了红色系列，太神奇了。效果如上图所示css3 灰色滤镜css3 灰色滤镜，体验一下

牺牲我的国家，安慰我的英雄灵魂

欢迎访问：天文博客

©专着版权归作者所有，转载或内容合作请联系作者