方式一:filter(全站)
html {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
方式二:SVG滤镜(全站)
<svg xmlns="https://www.w3.org/2000/svg" style={{ width: '100vw', height: '100vh', display: 'block' }}>
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>
html {
-webkit-filter: url(#grayscale);
filter: url(#grayscale);
}
方式三:backdrop-filter(首屏)
html::before {
content: "";
position: absolute;
inset: 0;
-webkit-backdrop-filter: grayscale(1);
backdrop-filter: grayscale(1);
pointer-events: none;
}
方式四:mix-blend-mode(首屏)
html {
background: #fff;
}
html::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 1);
mix-blend-mode: color;
pointer-events: none;
}