首页 前端知识 网页快速置灰效果

网页快速置灰效果

2024-06-10 11:06:17 前端知识 前端哥 279 150 我要收藏

1、将页面 html 元素设置以下样式即可实现页面全部置灰:

html{
    filter: grayscale(100%);
}

2、考虑兼容问题可以直接把兼容性的属性写上去:

html{
	 -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
  • -webkit-:带有 webkit 前缀可以在 webkit 内核的浏览器中生效;
  • -moz-:带有 moz 前缀可以在 Firefox 浏览器中生效;
  • -ms-:带有 ms 前缀可以在 IE 浏览器生效;
  • -o-:带有 o 前缀可以在 Opera 浏览器生效;
  • 最后三行都是为了兼容 IE 内核的浏览器。

3、进行首屏部分置灰:
解决方案 :用backdrop-filter做一个遮罩,毕竟filter还是有点损耗首屏性能的,虽然可以用transform开启硬件优化一些,我们还可以用遮罩的方式挡住也可以的,并且设置pointer-events: none;不阻挡用户交互,也是一段css搞定

html {
    position: relative;
    width: 100%;
    height: 100%;
}
html::before {
    content: "";
    position: fixed;
    backdrop-filter: grayscale(100%);
    pointer-events: none;
    inset: 0;
    z-index: 100;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11782.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

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