div元素的被弄脏的背景

Question

我正在制作一个图像库。我有一个div里面，我保留了一个图像。现在我希望div具有与背景相同的图像但模糊不清。我使用了常见的CSS3模糊选项，但所有子元素也变得模糊（在我的情况下是图像）。我是JavaScript新手，所以会喜欢简单的代码。

Answer 1

如果有的话，你的问题更多的是CSS问题。我猜你在做的是：

HTML：

<div class="parentElement">
    <div class="child"></div>
</div>

CSS：

.parentElement { filter: blur(15px); }

或者在JS中：

document.getElementsByClassName("parentElement")[0].style.filter = "blur(15px)";

这会模糊背景以及parentElement中的所有元素。

只模糊元素背景的最佳解决方案是在你的父元素中为你的背景创建一个单独的子元素（或者你用背景调用的任何类），并将样式设置为如下：

HTML：

<div class="parentElement">
    <div class="background"></div>
    <div class="child"></div>
</div>

CSS：

.background { filter: blur(15px); }

或者在JS中：

document.getElementsByClassName("background")[0].style.filter = "blur(15px)";

你需要上课＆＃34;背景＆＃34;像背景一样，你需要使它成为父元素的全宽，并将其置于绝对位置。

CSS：

.parentElement { position:relative; }

.background { position:absolute; top:0; left:0; width:100%; height:100%; filter: blur(15px); }