Question

我有这个音乐播放器，其中专辑封面显示在正面，并模糊为所有其他元素背后的背景。 See image

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

目前我在背景专辑中的css看起来像这样：

＆＃13;

 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;

＆＃13;

如果需要更多信息，请告诉我。

Answer 1

对我来说。使用img并使用绝对位置。使用宽度填充父级：100％。

注意：父元素应该有position: relative和overflow: hidden

＆＃13;

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); }

＆＃13;

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

＆＃13;

如何保持div中包含的模糊？

1 个答案: