div内にぼかしを保存する方法は？

Question

私はこの音楽プレーヤーを持っています。ここでは、アルバムアートが前面に表示され、他のすべての要素の背後に背景としてぼやけています。 See image

画像に示されているように、そのぼかしがコンテナを越えて広がることは望ましくありません。バックグラウンドアルバムの現時点で

私のCSSは次のように探しています：任意のより多くの情報が必要とされている

box-shadow: 0 10px 150px rgba(0, 0, 0, .3) inset; 
 
-webkit-filter: blur(30px); 
 
-moz-filter: blur(30px); 
 
-o-filter: blur(30px); 
 
-ms-filter: blur(30px); 
 
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='30'); 
 
filter: blur(30px); 
 
object-fit:cover;

場合は私に知らせてください。

Answer 1

私のため。 imgを使用し、絶対位置を使用してください。親に幅：100％を入力します。

注：親要素は、[背景画像にCSS 3ぼかしフィルタを適用する方法]のposition: relativeとoverflow: hidden

body { 
 
    padding: 20px; } 
 

 
.player { 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    height: 300px; 
 
    width: 600px; 
 
    overflow: hidden; 
 
    border-radius: 5px; } 
 
    
 
.player img { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    filter: blur(10px); } 
 
    
 
.player .container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.7); }

<div class="player"> 
 
    <img src="http://2.bp.blogspot.com/-S0n9Rq5kIZg/VpKvLN1EyoI/AAAAAAAAAT8/B6kEp6sRTH4/s1600/dewapoker.jpg" /> 
 
    <div class="container"> 
 
</div>