说说filter这个css属性（网站置灰实现） |
您所在的位置：网站首页 › span标签置灰 › 说说filter这个css属性（网站置灰实现） |
说说filter这个css属性（网站置灰实现）
|
在2020年4月4日这一天，大家无论打开手机、电脑网页还是APP，都可以看到所有的内容都已经变成了灰色，大家可能还会误以为是网站统一换了一套css样式，不过后面转念一想这么多网站及页面，如果要统一换样式，工程还是很大的。好奇心驱使我打开浏览器查看元素，结果发现很多的网站几乎是通过一个css属性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文件： 然后在你的js文件中置灰你想置灰的元素，如果要全页面置灰可以作用在html元素上，如： grayscale(document.getElementsByTagName("img")); grayscale(document.getElementsByTagName("html")); |
【本文地址】
今日新闻 |
推荐新闻 |