将整个网站变为黑白色

简介: 将整个网站变为黑白色

效果:


ps:实测淘宝也是用的这种方式,有兴趣可以去看看

image.png

代码:


使用方式就是找到根标签,将里面的两行代码放进去即可

html {
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(100%);
  }

兼容性写法:


上面的方式基本够用,常见的浏览器经测试没问题,实际上这个方法已经实际使用很多年了。

html {
    -webkit-filter: grayscale(100%); //chrome、safari浏览器
    -moz-filter: grayscale(100%);//firefox浏览器
    -ms-filter: grayscale(100%);  //IE浏览器
    -o-filter: grayscale(100%); //Opera浏览器
    filter: grayscale(100%); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
   }

原理:


grayscale() - CSS(层叠样式表) | MDN

可以点击上面的链接去详细了解。大体意思是,这个方法是对图片进行灰度转换,使用方式:

grayscale(0)     /* 无效果 */
grayscale(.7)    /* 70% 灰度 */
grayscale(100%)  /* 灰度最大 */
完整写法:filter: grayscale(0.20);//20%灰度


相关文章
|
数据可视化 JavaScript 前端开发
Turf.js介绍
Turf.js介绍
1028 0
|
JSON 前端开发 API
TDesign中后台管理系统-用户登录
TDesign中后台管理系统-用户登录
|
10月前
|
消息中间件 人工智能 监控
Paimon x StarRocks 助力喜马拉雅直播实时湖仓构建
本文由喜马拉雅直播业务与仓库建设负责人王琛撰写,介绍了喜马拉雅直播业务的数据仓库架构迭代升级。文章重点分享了基于 Flink + Paimon + StarRocks 实现实时湖仓的架构及其成效,通过分钟级别的收入监控、实时榜单生成、流量监测和盈亏预警,大幅提升了运营效率与决策质量,并为未来的业务扩展和 AI 项目打下坚实基础。
523 5
Paimon x StarRocks 助力喜马拉雅直播实时湖仓构建
|
11月前
|
Linux KVM 虚拟化
windwos上通过qemu直接开启img、qcow2等格式磁盘镜像(无需转vmdk)
QEMU 是一款开源虚拟化软件,支持多种硬件平台和虚拟化技术,如 KVM 加速。它可以在 Windows、Linux 和 macOS 上运行。本文介绍了 QEMU 的下载、安装、配置虚拟网卡、启动虚拟机、网络通信及快照管理等步骤。通过 QEMU,用户可以轻松创建和管理虚拟机,实现高效的开发和测试环境。
4494 0
windwos上通过qemu直接开启img、qcow2等格式磁盘镜像(无需转vmdk)
|
JavaScript 前端开发 API
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
【Vue 3】一个小巧玲珑的 Vue 组件切换动画库,开源且免费!!
|
11月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
1335 0
|
缓存 JavaScript 前端开发
vue3+elementplus后台管理系统,实现用户登录
vue3+elementplus后台管理系统,实现用户登录
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
10252 130
【threejs】可视化大屏酷炫3D地图附源码
|
Web App开发 前端开发
css小技巧——鼠标悬浮时切换图片
css小技巧——鼠标悬浮时切换图片
528 0
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了