Question

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

SO代码段

div

public static ArrayList<String> divStr(String str,int div){
    String addable = "";
    ArrayList<String> ret = new ArrayList<String>();
    for(int i = 0; i < str.length();i++){
        addable += str.charAt(i);
        if((i + 1) % div == 0){
            ret.add(addable);
            addable = "";
        }
    }
    if (!addable.isEmpty()) ret.add(addable);
    return ret;
}

Answer 1

如果可能的话，我建议将父元素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/

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

1 个答案: