遇到举国同悲的日子,大部分站点会将原本五颜六色的画面呈现为黑白,用黑白的色调,表达对伟人的追思,为逝去的英雄送行。用css就可以很方便的实现全站变灰的效果。
外部样式
目前绝大多数站点都采用了引用外部css文件的方式,对于这类站点,只需要找到外部引用css文件,在css文件中添加如下代码:
html {
-webkit-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
内部样式
如果网站后台无法定义CSS样式,这需要在站点模板页的head标签中间插入style标签:
<style>
html {
-webkit-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}
</style>
行内方式
行内的css样式用的比较少,博主只在淘宝店铺中尝试过行内样式:
<html style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(100%);">
考虑兼容性的写法
为了兼容多种浏览器标准,可以增加一下样式:
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}