基於圖像的頁面顏色背景

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>