当前位置:首页 > 站长杂谈 > 正文内容

哀悼日网站全站变灰CSS代码

小宝4年前 (2020-04-03)站长杂谈1284

为深切哀悼抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞,响应国务院发布的2020年4月4日全国性哀悼活动! 新型冠状病毒肺炎疫情阻击战打响以来,全国各地抗疫工作人员与同胞们一直都战斗在一线, 对他们的付出,菠萝博客致以最崇高的敬意!

202004031585921375653610.jpg 哀悼日网站全站变灰CSS代码  CSS 代码 第1张

为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。

捕获.PNG 哀悼日网站全站变灰CSS代码  CSS 代码 第2张下面给大家放一次性修改代码,直接放在CSS样式里面就可以了!

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;
}

这种效果是用纯CSS来实现的。

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

如果你想全站变灰,代码如下

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果你想只对于网站图片来实现灰度,代码如下

img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果只想针对部分图片,代码如下

/*这段代码只会对于class位grey的图片*/
img.grey{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

扫描二维码推送至手机访问。

版权声明:本文由 菠萝博客 发布,如需转载请注明出处。

本文链接:https://boluobk.cn/post/27.html

标签: CSS代码
分享给朋友:

相关文章

网站已安全运行X天X小时X分X秒

网站已安全运行X天X小时X分X秒

截止至现在本站已安全运行784天,还是和以前一样,就是人变懒了,代码都是以前的东西,css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件即可,不懂留言~好久没发文章了,水一下。◕‿◕。代码一:本站已安全运行: <span...

PHP 提取文件路径中文件名及文件后缀的方法

php 在处理本地的文件时,有时候需要获取到它们的文件名,以便做进一步的逻辑处理。那么在 php 语言中,如何获取本地的文件名呢?今天飞鸟慕鱼博客的小编就来和大家说一说,php 中通过文件的路径来提取文件名以及文件后缀的方法php base...

利用Haproxy解决SMTP发信暴露服务器源IP的方法

最近有人问我自己搭建的WHMCS系统用SMTP发信会暴露服务器IP,在这里发一下怎么用Haproxy解决这个问题。WHMCS 经常因为邮件问题被攻击,现在来给大家介绍一个邮件转发服务器的设置办法,可以完全隐藏掉真实的源站地址。我们以 Cen...

zblog报错“授权文件非法”的错误原因和解决办法

zblog报错“授权文件非法”的错误原因和解决办法

最近有几位用户向我们反应在安装zblog老版本的时候发现后台会提示“授权文件非法”,错误截图如下:经过检查后得知此问题的原因是:zblog官方插件“应用中心”在2018-12-19升级的时候出现了一个bug导致的。错误解决办法:更新到最新版...

简介漂亮的广告代码

简介漂亮的广告代码

效果图:代码如下:<!--图片广告区域开始--> <div style="background-color:#fff;box-shadow:0px 0px 10px #d...

【网络推广】不懂这些本质原理怎么做好网络推广排名的搜索营销?

【网络推广】不懂这些本质原理怎么做好网络推广排名的搜索营销?

无意中在百度知道看到了这样一个问答题——“网页浏览器与互联网的关系”。虽然这个问题是发生在2011年,但回顾我之前网络推广营销策划咨询工作的种种交互,发现看似商业互联网化大家都玩得如火如荼的,但事实上还是极少人能透彻的理解互联网以及搜索营销...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。