这篇文章给大家分享的是有关CSS获取图片主题色的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
背景
起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调:
利用获取到的这个颜色值,来实现类似这样的功能,容器中有一张图片,希望背景色可以适配图片的主色,像是这样:
大家出谋划策,有说利用帆布进行计算的,有推荐专门的开源库的,都挺好。
那么,利用CSS,能不能实现这个功能呢?
听起来好像有点痴人说梦,CSS还能实现这个效果?嗯,利用CSS确实可以通过一种讨巧的方式,近似的获取到图片的主色调,在对主色的要求不是特别精确的情况下,不失为一种办法、下面一起来一探究竟。
<>强利用过滤器:模糊()及变换:天平(),获取图片主题色强>
这里,我们利用模糊滤镜以及放大效果,可以近似的拿到图片的主题色。
假定我们有这样一张图片:
& lt; div> & lt;/div>
利用模糊滤镜作用给图片:
div { ,,,背景:,url (“https://i0.wp.com/airlinkalaska.com/wp - content/uploads//aurora - 2. jpg?resize=1024%2c683& ssl=1“); ,,,background-size:,封面; ,,,过滤器:,模糊(50 px); }
看看效果,我们通过比较大的一个模糊滤镜,将图片<代码>模糊(50 px)> 代码,模糊之后的图片有点那感觉了,不过存在一些模糊边缘,尝试利用<代码>溢出代码>进行裁剪。
接下来,我们需要去掉模糊的边边,以及通过<代码>变换:规模()代码>放大效果,将颜色再聚焦下,稍微改造下代码:
div { ,,,位置:,相对; ,,,宽度:,320 px; ,,,身高:,200 px; ,,,溢出:,隐藏; } div: before { 内容,,,:,“,“; ,,,位置:,绝对; ,,,:,0; ,,,左:,0; ,,,右:,0; ,,,底部:,0; ,,,背景:,url (“https://i0.wp.com/airlinkalaska.com/wp - content/uploads//aurora - 2. jpg?resize=1024%2c683& ssl=1“); ,,,background-size:,封面; ,,,//,核心代码: ,,,过滤器:,模糊(50 px); ,,,变换:,规模(3); }
结果如下:
这样,我们就利用CSS,拿到了图片的主色调,并且效果还是不错的!
完整的代码你可以戳这里:CodePen演示,获得,图像的主色调,过滤器和规模
不足之处
当然,该方案也是存在一定的小问题的:
- <李>
只能是大致拿到图片的主色调,无法非常精确,并且<代码>过滤器:模糊(50 px) 代码>这个<代码> 50 px> 代码需要进行一定的调试
李> <李>模糊滤镜本身是比较消耗性能的,如果一个页面存在多个这种方法获取到的背景,可能对性能会造成一定的影响,实际使用的时候需要进行一定的取舍
李>感谢各位的阅读!关于“CSS获取图片主题色的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!