首页 前端知识 通过css设置filter 属性,使整个页面呈现灰度效果,让整个网页变灰

通过css设置filter 属性,使整个页面呈现灰度效果,让整个网页变灰

2024-03-20 11:03:18 前端知识 前端哥 141 638 我要收藏

通过css设置filter 属性设置页面整体置灰

效果图:
在这里插入图片描述
在这里插入图片描述

通过设置 filter 属性为 grayscale(100%),页面中的所有元素都会被应用灰色滤镜效果,使整个页面呈现灰度效果。
<style type="text/css">
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

</style>
filter 属性是用来给元素添加不同的滤镜; grayscale() 函数将改变输入图像灰度,该函数有一个参数,表示转换为灰度的比例。当值为 100% 时,完全转为灰度图像;当值为 0% 时图像无变化。值在 0% 到 100% 之间,则是效果的线性乘数。若未设置值,默认是 0。

注意:如果您只想将特定区域置灰,可以选择使用其他 CSS 选择器来选择您希望应用滤镜效果的特定元素或容器。

兼容不同浏览器代码:

html{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
-webkit-filter:带有 webkit 前缀可以在 webkit 内核的浏览器中生效;
-moz-filter:带有 moz  前缀可以在 Firefox 浏览器中生效;
-ms-filter:带有 ms 前缀可以在 IE 浏览器生效;
-o-filter:带有 o 前缀可以在 Opera 浏览器生效;
最后三行都是为了兼容 IE 内核的浏览器。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/3959.html
标签
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!