是否有可能使HTML div模糊而内部没有元素？

Question

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

Answer 1

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

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

有关背景定位的详情，请参阅this page。

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

Answer 2

我猜您可以使用以下stackoverflow答案 check if div have elements 。 如果元素不存在则可以使用 document.getElementById（＆＃34; yourId＆＃34;）。blur（）; 模糊你的div你可以参考learn more about blur