画像に基づくページの背景の背景

Question

画像を含むdivの変更の背景色を作成しようとしています。私は、画像の前に色が表示されているGoogle、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>