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

它不起作用，因为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>

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望它有所帮助。

与文本的被弄脏的gif背景在bootstrap的上面

2 个答案: