在引导中文本在顶部模糊的gif背景

Question

我有一个gif背景设置在我的引导容器的顶部行，我想有一些文本在顶部，但每当我试图使背景模糊，文本也模糊。

我希望背景是模糊的，但有“项目1”是完全可见的，而不是模糊的。

代码：

​

#header {
     background-image:url('https://developer.playcanvas.com/images/user-manual/scripting/go-to-anything.gif');
     background-size:cover;
     text-align: center;
     vertical-align: middle;
     height: 234px;
}
#header-text {
     padding: 50px 0; 
     color: darkorange; 
     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
     font-size: 80px;
}

<div class="container" style="background-color: darkseagreen">
    <div class="row">
        <div class="col-sm-12" id="header">
            <h1 id="header-text">Project 1</h1>
        </div>
    </div>
</div>

​

Answer 1

您可以添加另一个div元素，如下所示：

(我还删除了内联样式，因此CSS保留在CSS中。)

​

.container { /* From inline style */
  background-color: darkseagreen;
}

#header {
  position: relative; /* Added */
  /* Removed some other */
  text-align: center;
  vertical-align: middle;
  height: 234px;
  z-index: 1;
}

#header-text {
  position: relative; /* Added */
  padding: 50px 0;
  color: darkorange;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 80px;
}

/* Added all the below */
#header-back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('https://developer.playcanvas.com/images/user-manual/scripting/go-to-anything.gif');
  background-size: cover;
  filter: blur(3px);
}

<div class="container"><!-- Removed the inline style that was there -->
  <div class="row">
    <div class="col-sm-12" id="header">
      <div id="header-back"></div><!-- Added this -->
      <h1 id="header-text">Project 1</h1>
    </div>
  </div>
</div>

​

希望能帮上忙。

Answer 2

它不能工作，因为blur会影响所有子元素。

相反，将图像添加到伪元素并将其模糊。

示例：

​

#header {
  position: relative;
  height: 234px;
  /* center text */
  display: flex;
  justify-content: center;
  align-items: center;
}

#header:before {
  content: '';
  background: url('https://developer.playcanvas.com/images/user-manual/scripting/go-to-anything.gif');
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(3px);
}

#header-text {
  color: darkorange;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 80px;
  /* stack text above pseudoelement */
  position: relative;
}

<div class="container" style="background-color: darkseagreen">
  <div class="row">
    <div class="col-sm-12" id="header">
      <h1 id="header-text">Project 1</h1>
    </div>
  </div>
</div>

​