html - 是否可以使 HTML div 模糊而内部没有元素?

标签 html containers blur

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

Windows 10 menu with blurry background

最佳答案

我会使用 Photoshop 或其他工具模糊原始背景,然后将其作为背景图像并调整位置。像这样:

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

请引用this page有关背景定位的更多信息。

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

关于html - 是否可以使 HTML div 模糊而内部没有元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34582105/

相关文章:

html - 菜单全宽。列表项共享等宽以获得全宽

c++ - 有人可以解释以下语法及其功能吗?

unity-game-engine - Unity 高斯模糊着色器只是使我的纹理变白 - 为什么?

c# - 如何在 C# 中对位图图像应用模糊效果?

c - 使用 C 对位图进行模糊处理

javascript - 突出显示美国各州、获取分配的分类并选择相关州

html - 禁用水平滚动

html - 将 HTML5 Canvas 序列转换为视频文件

containers - ELI5 : How etcd really works and what is consensus algorithm

C++轻型可追加数组容器