html - 如何将模糊包含在一个 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%。

注意:父元素应该有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>