国家纪念日引起的一个css属性思考 ------ filter属性

最新推荐文章于 2021-12-31 10:47:42 发布

RexingLeung

最新推荐文章于 2021-12-31 10:47:42 发布

阅读量436

点赞数

分类专栏： css基础文章标签： css3

本文链接：https://blog.csdn.net/RexingLeung/article/details/105309544

版权

css基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

2020年4月4日早上10点 , 全国性哀悼活动正式开展 , 在向逝去的生命和前线壮烈牺牲的烈士致哀同时 , 依旧不忘加班 , 如往常打开浏览器 , 然后发现 , 基本上所有的网站都变灰了 , 在哀伤的同时 , 就想到一个问题 , 这样全部颜色和交互效果都变灰了 , 到底是怎么做的 , 具体的工作量是多大呢 ? 带着这个问题 , 我开始我的探索之旅

先来几张已经发生底色改变的网站

CSDN

百度

依然是一样灰色调

博客园

依然是一样灰色调

知乎

知乎居然没做出改变

简书

依然是一样灰色调

B站

还是熟悉的灰色调

淘宝

依然是灰色调

基于现象剖析

以上就是部分网站的情况 , 很明显 , 这个底色改变 , 仿佛所有网站都出现了 , 这样做出改变 , 对于程序员来说 , 工作量会不会很大呢 , 带着这个疑问 , 我打开了控制台
那么分析问题怎么开展呢 ?
既然是整个页面都是灰色调 , 那么就可以直接了当的从html节点开始查看了
首先我打开了CSDN控制台 , 查看html节点 , 果不其然 , 我们可以看到一个熟悉的身影 , 一个css3的新属性filter(后面会讲) , 简单来说就是一个滤镜效果的css熟悉

然后尝试把这个属性取消掉 , 原色调的CSDN就回来了

按照这个尿性 , 我打开了百度的控制台 , 发现百度是没有放在html标签上面的 , 那么我就开始寻找引入进来的css文件 , 先从头部的css文件找齐

一顿分析可以得知filter很大可能在 , id为css_index的标签里面(这就是html语义化的优点) , 然后我们拿到这个id="css_index"标签下所有的css属性 , 粘贴到我们的本地

拉取到本地的css文件出现了两处filter , 暴力处理 , 把两处filter删除 , 然后再替换百度首页的对应的css文件

原色调的百度首页回来了

其他的网站有些是静态资源服务器返回来的文件 , 就没有去做改变了 , 这里我们就改变网站基色调的是一个filter属性 , 那么filter属性是怎么样的呢

分析filter属性

先看看MDN是怎么解释filter的
filterCSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。

filter: url("../../media/examples/shadow.svg#element-id");
filter: blur();
filter: contrast();
filter: grayscale();
filter: hue-rotate();
filter: drop-shadow() invert();