CSS3学习与总结 · filter滤镜让个人网站一秒变成灰色系列


字数:338 阅读时长:1分钟 阅读:85

2021年12月13日是第八个 国家公祭日悼血与火浸染之地,祭抗战死难之生灵 ,国家各种官网和各大在线电商,都把网站设置为灰色系列,以此来悼念历史缅怀先烈。本文就介绍一下使用CSS3的filter滤镜属性让个人网站一秒变成灰色系列的具体方法。

CSS3 神奇的Filter

filter(滤镜) 属性

定义: filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊饱和度)。

grayscale(%)值: 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

灰色系列实现

html元素设置filter属性

1
2
3
4
5
6
7
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

提示: 可能有会给body元素添加filter属性,确实也可以做到同样的效果,但是如果页面中有fixed固定定位的元素或内容,会出现定位失效的问题,因此建议直接给html元素加filter属性。

就是这么简单,网站瞬间变成灰色系列,很神奇有木有。

祀我国殇,慰我英魂


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-12-13
最后更新: 2021-12-14
本文标题: CSS3学习与总结 · filter滤镜让个人网站一秒变成灰色系列
本文链接: https://www.tiven.cn/p/a58442ee/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^