前端黑白化主题设置

H5网页

H5页面设置黑白化主题比较简单：

html{
    
    
filter: grayscale(1);
}

如果需要考虑浏览器兼容问题，可以添加前缀

-webkit-filter: grayscale(1); 
-moz-filter: grayscale(1); 
-ms-filter: grayscale(1); 
-o-filter: grayscale(1); 

微信小程序

如果使用的默认导航栏则需要修改下导航栏背景颜色，自定义导航栏则不用

页面 json 配置文件：

"navigationBarBackgroundColor":"#666666"

样式：

page{
    
    
filter: grayscale(1);
}

如果当前页面使用到浮动定位会出现问题
在小程序中使用 filter 时发现，如果父元素设置了 filter 滤镜样式，会影响其子代元素 position: fixed 浮动定位的效果

解决方法：
给根元素的子代都设置filter，要浮动定位的元素作为根元素的子代元素则定位效果不会受影响。

.content>view,.content>image,.content>text{
    
    
filter: grayscale(1);
}

content 这里为 wxml 根元素类名