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

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

// 给全局的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')
  }

你可能感兴趣的:(css,css3,javascript,前端)