这几天大家的电脑、手机各种app首页整体变灰,这种现象怎么实现呢?一起来看看前端开发一定会的三种方法。
网页整体变灰怎么实现?CSS3 filter(滤镜) 属性
html{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
filter 属性定义了元素(通常是
)的可视效果(例如:模糊与饱和度)。
浏览器支持:
grayscale():
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
网页整体变灰怎么实现?IE浏览器
上面所说的css3属性IE浏览器并不支持,其实这样做已经覆盖了大部分浏览器
filter: gray;
这个属性直接加载html上是不管用的,如果需要图片变灰可以只将样式作用于img标签,或者用*通配符作用于所有元素,这样整个网站就会变灰。
经测试,在IE7-9都是没问题的,IE9以上不能生效。
网页整体变灰怎么实现?通用方案
如果你执意所有的浏览器都有这个效果,可以通过Greyscale.js实现:
在页面引入js文件:
然后:
grayscale(document.getElementsByTagName("img"));
或者直接这样:
grayscale(document.getElementsByTagName("html"));
实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换。
网页整体变灰怎么实现?以上就是知了姐整理的三种常见方法,希望能够对你的学习有帮助。关注成都知了堂前端培训机构,带你了解更多前端相关问题。
网页整体变灰前端开发一定会的三种方法
成都电脑/网络相关信息
12月2日 刷新
2023-04-21
2023-02-02 刷新
2022-12-09
2022-12-08
2022-12-07
2022-12-07
2022-12-06
2022-12-05
2022-12-02