div 元素的模糊背景答案

【问题标题】：Blurred background for a div elementdiv 元素的模糊背景
【发布时间】：2016-03-27 00:03:48
【问题描述】：

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

【问题讨论】：

【解决方案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 中的所有元素。

仅模糊元素背景的最佳解决方案是在您的 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)";

您需要将“背景”类设置为背景，为此，您需要将其设为父元素的全宽并将其绝对定位。

CSS：

.parentElement { position:relative; }

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

【讨论】：