在一些特殊时期,很多网站的页面都会不同程度上设置成了灰色。看到这些灰色的网页,开发者们可能会很好奇:网页内容不变的情况下,如何实现整页显示为灰色?
一般方案:CSS 实现网页灰度
CSS 滤镜能实现网页灰色,在页面加入以下 CSS 片段即可让页面显示为灰色。
body { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
该方案有兼容问题:
- 不兼容 IE 浏览器,和低版本 Safari 浏览器;
- 不支持一些直接加载图片链接的场景;
在 IE 浏览器上,文字颜色、背景颜色等可以用 CSS 修改,那图片要怎么处理成灰色呢?
数据万象的灰度图方案
腾讯云数据万象 CI ,支持对存储在 COS 上的图片显示为灰度图。你只需要简单地在 COS 对象链接最后追加 ?imageMogr2/grayscale/1,即可让图片显示为灰色。可以参考数据万象的灰度图具体接口文档说明:(https://cloud.tencent.com/document/product/436/66518)
例如原图:
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg
加上灰度参数,显示为灰色:
http://examples-1251000004.cos.ap-shanghai.myzijiebao.com/sample.jpeg?imageMogr2/grayscale/1
除了灰度图功能,还有丰富的图片处理功能:
腾讯云数据万象 CI (Cloud Infinite,CI)还能实现对 COS 存储桶上的图片、视频、音频、文档等数据的处理,为客户提供专业一体化的数据处理解决方案,涵盖图片处理、媒体处理、内容审核、内容识别、文档处理等功能,满足客户多种场景维度的需求。
其中数据万象的完整图片处理能力如下:
欢迎点击下面小程序,体验数据处理更多功能:
— END —
点击“阅读原文”,了解更多关于数据万象!