将整个网站变为黑白色

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

效果:


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%灰度


相关文章
|
JSON 前端开发 API
TDesign中后台管理系统-用户登录
TDesign中后台管理系统-用户登录
|
消息中间件 人工智能 监控
Paimon x StarRocks 助力喜马拉雅直播实时湖仓构建
本文由喜马拉雅直播业务与仓库建设负责人王琛撰写,介绍了喜马拉雅直播业务的数据仓库架构迭代升级。文章重点分享了基于 Flink + Paimon + StarRocks 实现实时湖仓的架构及其成效,通过分钟级别的收入监控、实时榜单生成、流量监测和盈亏预警,大幅提升了运营效率与决策质量,并为未来的业务扩展和 AI 项目打下坚实基础。
613 5
Paimon x StarRocks 助力喜马拉雅直播实时湖仓构建
|
Linux KVM 虚拟化
windwos上通过qemu直接开启img、qcow2等格式磁盘镜像(无需转vmdk)
QEMU 是一款开源虚拟化软件,支持多种硬件平台和虚拟化技术,如 KVM 加速。它可以在 Windows、Linux 和 macOS 上运行。本文介绍了 QEMU 的下载、安装、配置虚拟网卡、启动虚拟机、网络通信及快照管理等步骤。通过 QEMU,用户可以轻松创建和管理虚拟机,实现高效的开发和测试环境。
5422 0
windwos上通过qemu直接开启img、qcow2等格式磁盘镜像(无需转vmdk)
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
1618 0
|
缓存 JavaScript 前端开发
vue3+elementplus后台管理系统,实现用户登录
vue3+elementplus后台管理系统,实现用户登录
|
达摩院 算法 图形学
达摩院视觉算法黑科技之透明抠图
透明抠图问题作为抠图问题的一种,其采用的方法和模型构建与通常的模型有所不同,透明抠图需要将环境光,折射率的影响纳入计算,而一般的折射光图又很难获得,因此透明抠图的模型在过去一直难以建立,或者说很难达到令人满意的效果,达摩院视觉算法团队通过双分支解码器(Object Mask获取,Opacity预测),颜色纠正模块,对图像实现高精度透明抠图。
达摩院视觉算法黑科技之透明抠图
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
10969 130
【threejs】可视化大屏酷炫3D地图附源码
|
存储 小程序 数据安全/隐私保护
点餐小程序实战教程02用户注册
点餐小程序实战教程02用户注册
|
编解码 JavaScript
vue导出并定制PDF样式
vue导出并定制PDF样式
vue导出并定制PDF样式