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

如果您的文字正在推动背景图片，请使用：

position: absolute

这将使文本从正常的＆＃34;流＆＃34;中删除。剩余的元素，他们将不再推动或被任何其他元素推动。请注意，您现在必须手动定位它，因为它不受任何其他元素的影响。

尝试位置：绝对在这里！ http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute

Answer 2

将其包裹在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 3

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

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