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 根元素类名