美文网首页美文共赏大前端
CSS3学习与总结 · filter滤镜让个人网站一秒变成灰色系

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

作者: 天問_专注于大前端技术 | 来源:发表于2021-12-13 22:24 被阅读0次

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

CSS3 神奇的Filter

filter(滤镜) 属性

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

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

灰色系列实现

html元素设置filter属性

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属性。

就是这么简单,网站瞬间变成灰色系列,很神奇有木有。效果如上图所示,体验一下

祀我国殇,慰我英魂


欢迎访问:天问博客

相关文章

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

    2021年12月13日是第八个 国家公祭日 , 悼血与火浸染之地,祭抗战死难之生灵 ,国家各种官网和各大在线电商,...

  • 使用css把彩色图片设置成黑白色

    IE下可以轻松实现,使用(filter:gray) CSS3 grayscale 实现滤镜 .gray{ ...

  • css 一些技巧

    鼠标选择字体时候改变颜色 和背景颜色 CSS3 filter(滤镜) 属性

  • 网站置灰

    如果需要把网站置灰,我们可以利用css3属性 filter设置如下:其实只需要一行代码就可以使网页变灰

  • 图片模糊处理/计算盒子宽度calc函数/

    CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。 盒子宽度calc函数 ...

  • css常用效果总结

    1.每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功...

  • 2019-08-27

    滤镜分类 根据滤镜的功能对滤镜进行了如下分类,方便大家查阅—— 柔化系列效果滤镜 光学系列滤镜 颜色系列滤镜 灰...

  • 巧用 CSS3 filter(滤镜) 属性

    效果预览 这里仅展示黑白效果。 原文链接:CSS3 filter(滤镜) 属性[https://tzy1997.c...

  • CSS3 filter滤镜

    CSS3里的filter滤镜是个很酷炫的元素。本篇介绍一下几个常用的滤镜效果。 drop-shadow sepia...

  • CSS3的filter属性详解

    CSS3新增了滤镜属性filter,总共定义了10种效果,filter目前的浏览器的兼容情况如下: 当blur(1...

网友评论

    本文标题:CSS3学习与总结 · filter滤镜让个人网站一秒变成灰色系

    本文链接:https://www.haomeiwen.com/subject/ezbsfrtx.html