本文与大家分享一种利用 CSS 获取图片主题颜色的小贴士。有一定的参考价值,有需要的朋友可以参考,希望对大家有所帮助。

css图片样式网站(css图片格式)

背景

原因是微信技术集团的一个学生问,有什么方法可以获得图片的主色调?有一张图片来获得他的主色调:

css图片样式网站(css图片格式)

利用获得的颜色值来实现类似的功能 -- 容器中有一张图片,希望背景色能适应图片的主色,如下:

css图片样式网站(css图片格式)

每个人都有建议,有说用 Canvas 计算,有推荐专门的开源库,都挺好的。

那么,利用 CSS,能否实现这一功能?

听起来有点痴人说梦,CSS 还能达到这个效果吗?emm,利用 CSS 的确,你可以通过一种巧妙的方式获得图片的主色调。当对主色的要求不是特别准确时,这是一种方法。让我们一起来看看。

利用 filter: blur() 及 transform: sacle() 获取图片主题色

在这里,我们可以利用模糊滤镜和放大效果,近似地得到图片的主题色。

假设我们有这样一张照片:

css图片样式网站(css图片格式)

前端开发-adminJS.cN http://www.adminjs.cn">编程网

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:css图片样式网站(css图片格式)

相关推荐