OTT 前端技术

css 一键置灰网页

特殊的日子总有有些特殊的需求，比如像我们的伟人致敬

方案一

html.gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

方案二

使用 backdrop-filter 实现首屏置灰遮罩

html {
  position: relative;
}
html::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 保证页面交互 */
  pointer-events: none;
  z-index: 9999;
  backdrop-filter: grayscale(95%);
}

方案三

借助混合模式实现网站置灰，这里其实是方案二的替代

html {
  background: #ffffff;
  position: relative;
}
html::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: color;
  background: rgba(0, 0, 0, 1);
}

注意
1.在网页中，最好的方案是加到HTML
2.在小程序中，会使得fixed失效，只给对应的元素加上
3.小程序中可以尝试使用root-portal视图容器脱离文档