本文将介绍一个利用CSS获取图片主题色的小技巧。来看看吧~背景是微信技术群里有个同学问，请问有没有办法获取图片的主色？有一张图片，获取它的主色：利用获取的颜色值实现这样一个功能——容器中有一张图片，希望背景色能适配图片的主色，像这样：大家提建议，有的说用Canvas做计算，有的推荐专门的开源库，都很好。那么，使用CSS，是否可以实现这个功能呢？听起来很梦幻，CSS也能实现这种效果？emm，使用CSS确实可以很巧妙的逼近图片的主色。当对主色调的要求不是特别精准时，不失为一种方式。让我们一起来了解一下。使用filter:blur()和transform:sacle()获取图片的主题色这里我们使用模糊滤镜和缩放效果来逼近图片的主题色。假设我们有这样一张图片：
使用模糊滤镜给图片：div{background:url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");背景尺寸：封面；filter:blur(50px);}看效果，我们用一个比较大的blurfilter对图片进行模糊处理（50px），模糊后的图片感觉有点像，但是有一些模糊的边缘，尝试用overflow来庄稼。接下来我们需要去掉模糊的边缘，使用transform:scale()放大效果，再次聚焦颜色，稍微修改一下代码：div{position:relative;宽度：320px；高度：200px；溢出：隐藏；}div::before{内容：“”；位置：绝对；顶部：0；左：0；右：0；底部：0；背景：url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");背景尺寸：封面；//核心代码：filter:blur(50px);transform:scale(3);}Result如下：这样我们使用CSS获取图片的主色，效果还是不错的！完整代码可以点击这里：CodePenDemo--通过filterandscale获取图片的主色不足当然这个方案也有一些小问题：只能粗略的获取图片的主色，不能非常精确，并且filter:blur(50px)这个50px需要一些调试。模糊滤镜本身会消耗性能。如果一个页面中有多个通过该方法获取的背景，可能会对性能造成一定的影响。在实际使用中，需要做出一定的取舍。最后，本文到此结束。介绍一个利用CSS获取图片主题色的小技巧。希望对你有所帮助:)感谢介绍这个方法的同学。--XboxYan，iCSS微信群很活跃。它聚集了一群CSS大佬。想进群讨论技术的同学可以加我微信coco1s（因为群超过200人，不能扫码进群，只能邀请）如果想获取最有趣的CSS资料，不要错过我的公众号——iCSS前端趣闻单击星标以订阅收藏夹。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。文中如有不准确之处，万网会告知。