说说filter这个css属性（网站置灰实现）

在2020年4月4日这一天，大家无论打开手机、电脑网页还是APP，都可以看到所有的内容都已经变成了灰色，大家可能还会误以为是网站统一换了一套css样式，不过后面转念一想这么多网站及页面，如果要统一换样式，工程还是很大的。好奇心驱使我打开浏览器查看元素，结果发现很多的网站几乎是通过一个css属性filter来设置这种置灰的效果

一、filter属性：

1、也叫做滤镜属性，用于将模糊和颜色偏移、饱和度、透明度等图形效果应用于元素上。
2、旧版的IE（4-8）不支持该属性
3、默认值为none，表示没有任何效果

二、取值：

1、none   -》默认值，表示没有任何效果2、blur(px值)  -》给元素设置高斯模糊，值越大越模糊，默认是0，可以接受css的长度值，不支持百分比3、hue-rotate（deg值） -》设置应用色相相转，色环的角度值没有限制，0deg为无变化，n*360deg表示转到原来的位置，还是无变化4、drop-shadow(水平偏向值，垂直偏向值，模糊大小值，阴影缩放值，颜色) -》用于设置阴影，和box-5、shadow相似，但通过filter可以，一些浏览器为了更好的性能会提供硬件加速6、url() -》用来接收一个XML文件，该文件设置了滤镜，且可以包含一个锚点来指定一个具体的滤镜元素，如：filter: url(svg-url#element-id)7、brightness（百分比值） -》设置元素更亮或者更暗，0%是全黑，100%是原图，大于100%会比原图更亮8、contrast（百分比）  -》设置对比度，0%是全黑，100%是原图，大于1会使用更低的对比度9、grayscale（百分比） -》转为灰度图像，0%表示原图，100%则全部转为灰度图像10、opacity（百分比） -》设置透明度，0%表示完全透明，100%则无变化，它和opacity的属性很相似，不过通过filter来设置透明度可以提供硬件加速，进而提升来一些浏览器性能11、saturate（百分比） -》设置饱和度，0表示完全不饱和，100%是正常，大于100%会增加饱和12、sepia（百分比）转换为深褐色，0%是无变化，100%是完全转为深褐色13、initial -》设置属性为默认值14、inherit -》从父元素继承该属性

三、不支持filter的低版本IE怎么实现置灰效果呢

1、大部分浏览器可以通过设置filter:grayscale(.5)的方式或者设置filter为其他值的方式来实现网页的置灰效果，如：

html{.gray {-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);
}
}

2、IE7-9可以使用filter:gray来实现置灰，IE9以上就没有效果了

filter:gray;

3、对于低版本IE，可以引入grayscale.js文件进行置灰，这大概是一个通用的方法

在页面引入js文件：

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

然后在你的js文件中置灰你想置灰的元素，如果要全页面置灰可以作用在html元素上，如：

grayscale(document.getElementsByTagName("img"));  grayscale(document.getElementsByTagName("html"));

说说filter这个css属性（网站置灰实现）相关推荐

默哀日网站置灰，支持IE浏览器h5
前端有很多方法可以将网站设置成完全灰色,可以通过调CSS样式,可以加滤镜,可以通过js控制样式等.然而,对不那么熟悉前端的后台开发或维护人员,只能从网上找办法,东拼西凑.尝试很多次,最麻烦的是IE浏览 ...
css div li等等设置disabled属性实现置灰效果
默认情况下,div这种是没有disabled属性,没有不能点击的效果的,所以需要换个思路,增加disabled样式,如果生效的话置灰 <liv-for="item in data&qu ...
如何使用css实现网站变灰效果
目录示例代码分析 grayscale saturate 总结参考为了悼念新冠病毒牺牲的烈士,很多网站都在清明节那天把网站设置成了灰色. 示例我选择了几个网站,先来看看它们是如何实现网站变灰效 ...
html中灰色怎么写,css如何实现置灰不可点
实现a标签置灰不可点击禁用a标签的点击事件disabled属性和pointer-events属性值首先 ,大家要知道: a标签是没有disable 属性的 , 如果想用disable 禁止a标签 ...
html页面整体变灰,CSS + JS 网站变灰（变黑白），兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
由置灰引出的css滤镜filter是什么东西？
文章目录前言一.什么是置灰呀? (1)选择需要的元素全部置灰吧! (2)如何置灰中抽取子内容部分不置灰呢? (3)针对ie10.11怎么搞? 二.针对iframe的内容三.filter除置灰(g ...
在收到消息后秒级使网站变灰，不改代码不上线，如何实现？
注意:文本不是讲如何将网站置灰的那个技术点,那个技术点之前汶川地震的时候说过. 本文不讲如何实现技术,而是讲如何在第一时间知道消息后,更快速的实现这个置灰需求的上线. 实现需求不是乐趣,指挥别人去实现 ...
全局置灰操作：小程序置灰、app置灰、H5置灰
微信小程序全局置灰: 只需要在app.wsxx文件中添加一行代码: page {filter: grayscale(100%);} 也可以写到对应的页面中,xxx.wsxx 文件中添加:page {f ...
小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by ...

说说filter这个css属性（网站置灰实现）

一、filter属性：

二、取值：

三、不支持filter的低版本IE怎么实现置灰效果呢

说说filter这个css属性（网站置灰实现）相关推荐

最新文章

热门文章