本文将介绍一个利用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");background-size:cover;filter:blur(50px);}看效果，我们用比较大的blurfilter对图片进行模糊处理（50px），模糊后的图片感觉有点像，但是有一些模糊的边缘，尝试用overflow裁剪一下。接下来我们需要去除模糊的边缘，使用transform:scale()放大效果，再次聚焦颜色，稍微修改一下代码：div{position:relative;width:320px;height:200px;overflow:hidden;}div::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");background-size:cover;//核心代码：filter:blur(50px);transform:scale(3);}结果如下：这样，我们使用CSS获取图片的主色，效果还是不错的！完整代码可以点这里：CodePenDemo--通过filter和scale获取图片的主色[1]不足当然，这个方案也有一定的小问题：只能粗略的获取图片的主色，而且不能很准确，filter:blur(50px)这个50px需要调试。模糊滤镜本身是有消耗性能的，如果一个页面上有多个通过该方法获取的背景，可能会对性能造成一定的影响。在实际使用中，需要做出一定的取舍。最后，本文到此结束，介绍一种使用CSS获取图片主题色的Tips，希望对大家有所帮助：）参考[1]CodePenDemo——通过filter和获取图片的主色规模：https://codepen.io/Chokcoco/pen/poRBQGg