如何在 div 中保持模糊

Question

我有这个音乐播放器，专辑封面显示在前面，并在所有其他元素后面模糊为背景。见图片

我不希望这种模糊延伸到容器之外，如图所示。

我目前的背景专辑的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%。

注意：父元素应具有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>