网页 css黑白 灰色 遮罩全局 设置

网页 css黑白 遮罩全局 设置

从政府采购网看到的，特殊时间，网页设置灰色遮罩，搜索了一下 在此记录一下
直接添加class 名就可以实现

设置灰色遮罩

.gray {
  -webkit-filter: grayscale(100%); /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/
  -moz-filter: grayscale(100%); /* 目前没有实现 */
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%); /* CSS3 filter方式，标准写法*/
  /*filter: url(filters.svg#grayscale);*/ /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

鼠标移入去除遮罩

.gray:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  filter: none; /* Firefox 4+, IE 6-9 */
}

原始地址：https://www.cnblogs.com/horanly/p/6101218.html