使用css3将整个网站变成黑白色调
0 点赞
0 条评论
3445 次浏览
发布于 2021-11-03 10:24
有时候进行哀悼活动时,身为站长的我们都会响应国家的号召让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念,通过几行简单的代码,来实现这个功能
1、css实现
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
2、svg实现
//gray.svg
然后通过css调用
html{
-webkit-filter: url('./gray.svg#grayscale');
-moz-filter: url('./gray.svg#grayscale');
-ms-filter: url('./gray.svg#grayscale');
-o-filter: url('./gray.svg#grayscale');
filter: url('./gray.svg#grayscale');
}
之前效果:
之后的效果:
语法解释:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
使用dart-sass替换node-sass
6818 浏览 · 0 评论
浏览器后退跳转到指定的页面
5567 浏览 · 0 评论
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
5274 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
5140 浏览 · 0 评论
Flutter适配夜间模式
5016 浏览 · 0 评论
最新文章
WebRTC一对一视频通话
1106 浏览 · 0 评论
react hooks 封装任务队列方法
1448 浏览 · 0 评论
js通过扫码枪快速录入的实现
1750 浏览 · 0 评论
使用 WebSocket 实现你画我猜实时绘图
1993 浏览 · 0 评论
基于code-server部署自己的云端vscode
4473 浏览 · 0 评论
支付宝动态收款码生成自定义金额及备注
4586 浏览 · 0 评论