是否可以使 HTML div 内部没有元素变得模糊？答案

【问题标题】：Is it possible to make an HTML div blurred with no elements inside?是否可以使 HTML div 内部没有元素变得模糊？
【发布时间】：2016-01-03 22:00:19
【问题描述】：

我想在没有内部元素的情况下模糊潜水或任何 html 容器的背景。好吧，我尝试用谷歌搜索它，发现它可以通过 html2canvas （从对象下方创建图像然后模糊它）并且使用 -webkit-backdrop-filter 还没有效果。我想要的是一个类似于下面屏幕截图中的 Windows 10 菜单背景的实时模糊容器。

【问题讨论】：

标签： html containers blur

【解决方案1】：

我会使用 Photoshop 或其他东西模糊原始背景，然后将其作为背景图像并使用位置。像这样：

container {
 background-image: url("blurredbg.png");
 background-repeat: no-repeat;
 background-position: 30px 0px;
}

有关背景定位的更多信息，请参考this page。

当然，您可以在 javascript 中使用 container.style.backgroundPosition="100% 0"; 动态控制定位

【讨论】：

remdevtec 谢谢，但这里没有 div 或任何 html 容器被模糊，也不是实时模糊。我有一组使用过渡和幻灯片的实时元素（在 Windows 8 中），同时我有一个位于这些实时元素上方的弹出菜单。在这里，我想模糊上面屏幕截图中提到的菜单的背景（不是动态图块图像）。

【解决方案2】：

我想您可以使用以下 stackoverflow 答案 check if div have elements . 如果元素不存在，那么您可以使用 document.getElementById("yourId").blur(); 要模糊您的 div，您可以参考 learn more about blur

【讨论】：