从图像

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 fiddle，它给人一种渐变的感觉。

1. 使用 Javascript ：

你可以使用基于画布的StackBlur来模糊你可以用作background-img（在外部div中）的图像，这将再次给人一种渐变的感觉。这是一个有效的example。

希望这有帮助。