基于图像的页面颜色背景

Question

我正在尝试使我的div的背景颜色基于它包含的图像发生变化。我已经看到类似的效果谷歌，Pinterest等等颜色显示在图像之前。优选多于一种颜色，可能为梯度。有任何想法吗？谢谢！

Answer 1

这可以通过图像模糊来完成。

.container { 
 
    position:fixed; 
 
    width:200px; 
 
    height:150px; 
 
    border: 1px solid black; 
 
    border-radius: 2px; 
 
    overflow:hidden; 
 
} 
 

 
.background { 
 
    width: calc(100% + 40px); 
 
    margin-left: -40px; 
 
    margin-top: -40px 
 
    height:calc(100% + 40px); 
 
    position:absolute; 
 
    z-index:-1; 
 
    filter: blur(40px); 
 
} 
 

 
.foreground { 
 
    border:solid 1px black; 
 
    max-width:150px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <img class="background" src="http://neil.computer/stack/bg.jpg" /> 
 
    <img class="foreground" src="http://neil.computer/stack/bg.jpg" /> 
 
</div>