使用css3将整个网站变成黑白色调
0 点赞
0 条评论
552 次浏览
发布于 7 个月前
有时间进行哀悼活动时,身为站长的我们都会响应国家的号召让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念,通过几行简单的代码,来实现这个功能
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
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
2065 浏览 · 0 评论
浏览器后退跳转到指定的页面
2038 浏览 · 0 评论
Flutter适配夜间模式
1524 浏览 · 0 评论
JavaScript实现继承的几种方法
1250 浏览 · 0 评论
【面试题】创建长度为100的数组
1173 浏览 · 0 评论
使用dart-sass替换node-sass
822 浏览 · 0 评论
最新文章
centos7中编译安装nginx
86 浏览 · 0 评论
JavaScript计算两个颜色之间的渐变色值
111 浏览 · 0 评论
vue router提供了addRoutes,却没有提供removeRoutes的解决方案
104 浏览 · 0 评论
基于Axios的封装和请求接口的管理
197 浏览 · 0 评论
使用verdaccio搭建私有npm仓库
224 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
513 浏览 · 0 评论