html - 如何在不影响顶部内容的情况下使背景图像模糊？

<分区>

我正在尝试使背景图像变得模糊。但保持其上方的内容可见。我认为有一个问题是因为使父元素变得模糊。如何解决这个问题？尝试了几个步骤，但它并没有真正起作用。

SO 片段

#clan-profile {
  background-image: url(http://placekitten.com/500/200);
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

<section id="clan-profile">
  <div class="container">
    <div class="row pt-4 pb-4">
      <div class="col-12 col-md-6">
        <div class="row pb-1">
          <div class="col-12">
            <h2>Lorem Ipsum</h2>
            <h5>Lorem Ipsum</h5>
          </div>
        </div>

        <div class="row pt-1 pb-1">
          <div class="col-12">
            <img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
            <img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
            <img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
          </div>
        </div>

        <div class="row pt-1 pb-1">
          <div class="col-12">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nulla, sed. Sunt, quo reprehenderit cum ut nihil dolor saepe. Culpa at velit, possimus iste eum ipsum similique sapiente neque aliquam.
          </div>
        </div>
      </div>

      <div class="col-12 col-md-6 pt-3">
        <img src="https://via.placeholder.com/500x200" alt="clan-img" class="img-fluid">
      </div>
    </div>
  </div>
</section>

最佳答案

如果可能的话，我建议将父元素clan-profile 和背景图片分开。

你可以这样做:

<section id="clan-profile">
  <div class="clan-image"></div>
  <div class="container">
    <div class="row pt-4 pb-4">
      <div class="col-12 col-md-6">
        <div class="row pb-1">
          <div class="col-12">
            <h2>Lorem Ipsum</h2>
            <h5>Lorem Ipsum</h5>
          </div>
        </div>
...

然后您可以执行以下 css:

.clan-image {
  background-image: url("...");

  /* Add the blur effect */
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

然后您需要做出决定。您可以使图像绝对定位，也可以使内容绝对定位。另一种解决方案是使用 css-grid , 并将元素放置在彼此之上，因为网格允许这样做。

编辑: 添加示例:https://jsfiddle.net/dw2Lq0zj/

关于html - 如何在不影响顶部内容的情况下使背景图像模糊？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55424842/

上一篇：html - 如何设置全屏背景图片？

下一篇：CSS避免使用Flex的位置高于另一个

javascript - 使用jQuery(或JSF方式)来防止h :commandButton submit

javascript - onekeydown 在 Firefox 65.0 ubuntu 18.04 中为每次键盘按下返回 "Process"字符串

angular - 在 Angular 7 中使用 bootstrap-notify

css - Bootstrap 4-有没有办法让表格行可点击？

html - Bootstrap 4 响应式卡片网格/数组

javascript - 如何使用 JQuery 延迟 10 秒一个接一个地删除每个列表项？

html - 为什么我的文字折叠成 4 行？

css - Jquery UI - 似乎无法弄清楚自定义选项卡颜色的 css