从图像创建渐变

Question

如何从图像创建渐变，以便我可以将其用作该图像的背景？作为背景的一种模糊效果？

我的 html 标记：

<div class="bck">
    <img class="thumb" src="20161204.jpg" />
</div>

样式应用：

.bck {
        height:500px;
        width: 500px;
        background-color: #9d9e88;  //grey
    }
    .thumb {
        height: 200px;
        width: 200px;
        left: 30%;
        position: relative;
        top: 30%;
    }

这给了我

我想通过此图像中使用的颜色填充背景/创建渐变。

这可以完全由 css（首选）完成吗？尽管如此，我对任何 JS 库都持开放态度

Answer 1

这可以通过两种方式实现。

1. 使用CSS：

这是一个非常简单的技巧，您可以在其中使用相同的图像作为外部<div>并像这样将其模糊

.image_blur {
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
    filter: blur(50px);
}

这是一个JS 小提琴，它给人一种渐变的感觉。

2. 使用Javascript：

您可以使用基于画布的 StackBlur 来模糊图像，然后您可以将其用作 background-img（在外部 div 中），这将再次给人一种渐变的感觉。这是一个工作示例。

希望这可以帮助。