CSS模糊背景问题

Question

我目前正在尝试使用它，以便我的文本背景有一个模糊的应用，并有一些问题。

​

​

这是我目前正在使用的代码。

.background-image {
  left: 0;
  right: 0;
  z-index: 1;

 display: block;
 background-image: url('http://www.example.com/image/image.png');

 -webkit-filter: blur(10px);
 -moz-filter: blur(10px);
 -o-filter: blur(10px);
 -ms-filter: blur(10px);
 filter: blur(10px);
}
#track {
  z-index: 9999;    
}

正如您在上面的屏幕截图中看到的，它将背景图像向上推，而不是将它放在我实际内容的后面。

Answer 1

将其包装在container中，然后按下面的方式尝试，将position:absolute分配给.track元素。

​

.background-image {
  left: 0;
  right: 0;
  z-index: 1;
 display: block;
 background-image: url('https://source.unsplash.com/random');
 -webkit-filter: blur(10px);
 -moz-filter: blur(10px);
 -o-filter: blur(10px);
 -ms-filter: blur(10px);
 filter: blur(10px);
 width:100%;
 height:400px;
}
.track {
  z-index: 9999;    
  position:absolute;
  bottom:0;
}

#container{
  width:80%;
  height:400px;
  margin:auto;
  overflow:hidden;
  position:relative;
}

<div id="container">
<div class="track">
<h1>
Content
</h1>
</div>
<div class="background-image">
</div>
</div>

​

Answer 2

如果您的文本正在向上推背景图像，请使用：

position: absolute

这将使文本从其他元素的正常“流”中移除，并且它们不再被任何其他元素推送或推送。注意，您现在必须手动定位它，因为它不受任何其他元素的影响。

用位置实验:绝对在这里！absolute

Answer 3

这是因为您正在使用当前的技术模糊背景。若要模糊文本，请将此类添加到文本中。

.blur-text
{
    color: transparent;
    text-shadow: 0 0 5px #000;
}