快速高效的将项目转换为灰度模式

338 阅读1分钟

快速高效的将项目转换为灰度模式

在工作中每年的一些网络宣传日,都需要把网站UI设置为黑白主题,需要将项目UI设计为黑白主题,怎么快速把项目设置为黑白主题呢?一行代码就解决!

 看效果:

image.png

代码

行内样式(加上webkit更加兼容页面):
<style="filter:grayscale(1);-webkit-filter:grayscale(1)">

style样式:
<style>
html { 
    filter: grayscale(1);
} 
</style>

filter为什么要加在html上呢?

因为加到html上可以让页面更加的兼容,因为如果你写了一些定位可能 会导致无法获取到,因为他们根据的是html来定位的,所以我们尽可能的把它写到html上。 缺点:会导致整个项目进入灰度模式。

如果项目中只让一个页面灰度而不是整个项目,那就写在单页面的body或者根元素上即可