css3滤镜属性filter让网页变黑白

最新推荐文章于 2022-12-12 17:08:18 发布

前端小趴菜的成长记录

最新推荐文章于 2022-12-12 17:08:18 发布

阅读量228

点赞数

分类专栏： css 文章标签： css3 javascript 前端

本文链接：https://blog.csdn.net/weixin_47434590/article/details/128134601

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这个特殊的日子里,我们能做的只能向英雄们,老前辈致敬🫡

// 给全局的html添加黑白色
html{
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
 }

// 如果只想给某个页面添加黑白色
.globalGray {
  -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);
  filter: gray;
}

// 所在页面mounted,destroyed中设置
mounted() {
	document.querySelector('html').setAttribute('class', 'globalGray')Ï
},
destroyed(){
   document.querySelector('html').removeAttribute('class', 'globalGray')
  }