框阴影颜色基于图像的颜色？

Question

是否可以让box-shadow根据应用于图像的颜色调整其颜色值？

如果您查看abduzeedo's site，您会发现图片都有独特的box-shadow颜色，通常与其父图像相关（如下图所示）。

我注意到CSS正在嵌入到HTML中，这告诉我这是通过脚本完成的，但是如何？这些颜色实际上是从图像中拉出来的还是任意/手动生成的？

我已尝试在Google上搜索此内容，但我没有太多运气。我不是要求一个教程，主要是这个叫做什么，如何找到它，或者它是否可以动态地进行，而不是随机或手动。

Answer 1

如您所述，您需要使用JavaScript。 您可以使用几种不同的插件选项，但最常用的是：

1. Color Thief
2. VibrantJS

提取图像的主色，并在特定元素上应用具有该颜色的内联box-shadow样式。

Answer 2

最简单的方法是将图像复制到另一层（使用position: absolute;），就像两层，一层又一层，然后在背景图像上应用filter: blur(16px);。

结帐：Codepen-demo