教你一招如何让网页变成灰色?

2022-04-06 12:40:18 浏览数 (2)

在一些特殊时期,很多网站的页面都会不同程度上设置成了灰色。看到这些灰色的网页,开发者们可能会很好奇:网页内容不变的情况下,如何实现整页显示为灰色?

一般方案:CSS 实现网页灰度

CSS 滤镜能实现网页灰色,在页面加入以下 CSS 片段即可让页面显示为灰色。

代码语言:javascript复制
body {    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);}

该方案有兼容问题:

  1. 不兼容 IE 浏览器,和低版本 Safari 浏览器;
  2. 不支持一些直接加载图片链接的场景;

在 IE 浏览器上,文字颜色、背景颜色等可以用 CSS 修改,那图片要怎么处理成灰色呢?

数据万象的灰度图方案

腾讯云数据万象 CI ,支持对存储在 COS 上的图片显示为灰度图。你只需要简单地在 COS 对象链接最后追加 ?imageMogr2/grayscale/1,即可让图片显示为灰色。可以参考数据万象的灰度图具体接口文档说明:(https://cloud.tencent.com/document/product/436/66518)

例如原图:

代码语言:javascript复制
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg

加上灰度参数,显示为灰色:

代码语言:javascript复制
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?imageMogr2/grayscale/1

除了灰度图功能,还有丰富的图片处理功能:

腾讯云数据万象 CI (Cloud Infinite,CI)还能实现对 COS 存储桶上的图片、视频、音频、文档等数据的处理,为客户提供专业一体化的数据处理解决方案,涵盖图片处理、媒体处理、内容审核、内容识别、文档处理等功能,满足客户多种场景维度的需求。

其中数据万象的完整图片处理能力如下:

欢迎点击下面小程序,体验数据处理更多功能:

— END —

点击“阅读原文”,了解更多关于数据万象!

0 人点赞