一行代码将网站变为灰色系CSS推荐

释放双眼,带上耳机,听听看~!

在网站运营过程中,我们有时候根据特殊的需求,会将网页的整体或局部编程灰色,一般应用在哀悼日、活动过期等需求上,这个时候,如果重写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类名中即可。

人已赞赏
开发

点赞模块设计 - Redis缓存 + 定时写入数据库实现高性能点赞功能

2019-12-22 14:36:34

报告

2019年助力数字化时代的零售升级

2019-10-24 14:38:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索