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