从图像创建渐变

How do I get about creating a gradient from an image so that I can use it as the background for that image? Kind of a blurring effect as the background?

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

My html markup:

我的HTML标记:

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

Styling applied:

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

which gives me

这给了我

I want to fill the background / create a gradient by the colours used in this image.

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

Can this be done purely by css (preferred) ? Nevertheless, I am open to any JS library

这可以完全由css(首选)完成吗?不过,我对任何JS库都开放

1 个解决方案

#1

This can be achieved in 2 ways.

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

Using CSS:

This is a very simple trick in which you can use the same image for the outer <div> and blur it out like this

这是一个非常简单的技巧,你可以使用相同的图像作为外部的

并将其模糊出来

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

Here is a JS fiddle which gives the feel of a gradient.

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

using Javascript:

You can use canvas based StackBlur to blur the image that you can then use as your background-img (in the outer div) which will again give a feel of a gradient. Here is a working example.

您可以使用基于画布的StackBlur来模糊您可以用作background-img(在外部div中)的图像,这将再次给出渐变的感觉。这是一个有效的例子。

Hope this helps.

希望这可以帮助。

#1