[CSS]网页内容黑白展示

针对某些特殊事件需求。

 

基本思路：

html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
 

考虑兼容性，应在<html>标签加入行内样式：
style="filter: grayscale(100%);/* -webkit-filter: grayscale(100%); */-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/* -webkit-filter: grayscale(1); */"

·如果body上有background属性
需要给html添加css: background:#ffffff; 图片才会全部变灰。
style="background:#ffffff;filter: grayscale(100%);/* -webkit-filter: grayscale(100%); */-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/* -webkit-filter: grayscale(1); */"

posted @ 2023-03-27 14:06  夕苜19  阅读(16)  评论(0)  编辑  收藏  举报