关于前端:小技巧CSS-提取图片主题色功能探索

本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~

背景

起因是微信技术群里有个同学提问，有什么办法可能获取图片的主色呢？有一张图片，获取他的主色调：

利用获取到的这个色彩值，来实现相似这样的性能 — 容器中有一张图片，心愿背景色能够适配图片的主色，像是这样：

大家出谋划策，有说利用 Canvas 进行计算的，有举荐专门的开源库的，都挺好。

那么，利用 CSS，能不能实现这个性能呢？

听起来如同有点痴人说梦，CSS 还能实现这个成果？emm，利用 CSS 的确能够通过一种讨巧的形式，近似的获取到图片的主色调，在对主色的要求不是特地准确的状况下，不失为一种方法，上面一起来一探到底。

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

这里，咱们利用含糊滤镜以及放大成果，能够近似的拿到图片的主题色。

假设咱们有这样一张图片：

<div></div>

利用含糊滤镜作用给图片：

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);
}

看看成果，咱们通过比拟大的一个含糊滤镜，将图片 blur(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，拿到了图片的主色调，并且成果还是不错的！

残缺的代码你能够戳这里：CodePen Demo — Get the main color of the image by filter and scale

不足之处

当然，该计划也是存在肯定的小问题的：

1. 只能是大抵拿到图片的主色调，无奈十分准确，并且 filter: blur(50px) 这个 50px 须要进行肯定的调试
2. 含糊滤镜自身是比拟耗费性能的，如果一个页面存在多个这种办法获取到的背景，可能对性能会造成肯定的影响，理论应用的时候须要进行肯定的取舍

最初

好了，本文到此结束，介绍了一种利用 CSS 获取图片主题色的小技巧，心愿对你有帮忙 :)

感激提出介绍这种办法的阅文的同学 — XboxYan，iCSS 微信群十分沉闷，汇集了一帮 CSS 大佬，想进群一起探讨技术的同学能够加我微信 coco1s（因为群超过了 200 人，不能扫码进群，只能邀请了）

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。