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

时间:2019-03-29 20:08:17

标签: html css css3 bootstrap-4

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

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

1 个答案:

答案 0 :(得分:2)

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