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

Question

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

如果您查看abduzeedo 的站点，您会注意到这些图像都有独特的box-shadow颜色，通常与其父图像相关（如下图所示）。

我确实注意到 CSS 被直接插入到 HTML 中，这对我说这是通过脚本完成的，但是如何呢？这些颜色实际上是从他们的图像中提取的还是任意/手动生成的？

我试过在谷歌上搜索这个，但我运气不佳。我不是要一个教程，主要是它叫什么，如何找到它，或者是否可以动态地而不是随机或手动地完成它。

Answer 1

最简单的方法是将图像复制到其他图像上（使用position: absolute;），例如两层，一层覆盖另一层，然后应用于filter: blur(16px);背景图像。

查看：Codepen-demo

Answer 2

正如您所提到的，您需要为此使用 JavaScript。您可以使用几种不同的插件选项，但最流行的两个是：

1. 色贼
2. 充满活力的JS

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