使用css3将整个网站变成黑白色调
0 点赞
0 条评论
2333 次浏览
发布于 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
5192 浏览 · 0 评论
浏览器后退跳转到指定的页面
3867 浏览 · 0 评论
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
3860 浏览 · 0 评论
Flutter适配夜间模式
3611 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
3571 浏览 · 0 评论
最新文章
js通过扫码枪快速录入的实现
406 浏览 · 0 评论
使用 WebSocket 实现你画我猜实时绘图
746 浏览 · 0 评论
基于code-server部署自己的云端vscode
2872 浏览 · 0 评论
支付宝动态收款码生成自定义金额及备注
2864 浏览 · 0 评论
使用 nohup 命令将程序挂载在后台执行
1960 浏览 · 0 评论
基于OpenLayers实现离线地图
2802 浏览 · 0 评论