释放双眼,带上耳机,听听看~!
在网站运营过程中,我们有时候根据特殊的需求,会将网页的整体或局部编程灰色,一般应用在哀悼日、活动过期等需求上,这个时候,如果重写css样式,则显得臃肿。今天栈长给大家推荐几种非常快速的全局css代码,专门用于将网页界面变成黑白灰色调,大家根据自己的具体情况选取:
一、全局外部样式
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
二、内部样式(写入头部head标签里面)
<style type="text/css"> <!-- html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);} --> </style>
三、内联式(写入html标签)
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
四、QQ群空间版,针对大部分主流浏览器(写入.css文件)
html {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
注意的是,以上css代码都是运用于全局,大家若是想要运用到局部界面,可以直接写到对应的class类名中即可。