Question

我想在this Bootstrap template中的背景图像上放置模糊滤镜，但这会导致子div也变得模糊。我遵循了this solution，它可以在台式机上运行，但不能在移动设备上运行。文本被移到顶部，并被导航栏截断，页眉的底部被截断，这都是由于我要添加的顶部/底部/左侧/右侧位置。这是我所拥有的：

HTML：

<header class="masthead text-center text-white d-flex">
  <div class='masthead-img'></div>

  <div class="container my-auto" style='z-index: 100;'>
  <!-- everything else is the same as what's in the template -->
...

这基于this code

CSS：

/* comment out header.masthead */

.masthead-img {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url("../img/header.jpg");
  background-position: center center;
  background-size: cover;
  z-index: 10;
  filter: blur(1px);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

这基于this code

<header class="masthead text-center text-white d-flex">
  <div class='masthead-img'></div> <!-- my addition -->
  ...
</header>

将背景图片放在单独的div中

0 个答案: