如何使div的背景模糊?

新手上路,请多包涵

好的,现在我一直在 StackOverflow 上搜索类似的问题,但实际上没有一个适合我的情况。所以我有一个覆盖整个网页的背景图片,在中心,我有一个 div,其中包含一些其他子 div(带有登录表单、一些段落等)。我想要的是只模糊那部分与 div 重叠的背景图像。图片:这里

所以我只希望红色矩形中的图像部分模糊。如果我只是向主 div 添加模糊过滤器,它只会模糊它的内容(文本和表单)。另外,请记住,背景图像不是 div 的背景,而是整个页面的背景。

原文由 user6875114 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 587
1 个回答
background-color: rgba(0, 0, 0, 0.61);

backdrop-filter: blur(5px);

backdrop-filter 是一种 CSS 属性,用于模糊网页上指定元素或区域的背景。它可以用于 div、图像和其他元素。它在 ChromeFirefox 103 及更高版本中受支持。可选 的背景颜色 可用于使背景更暗。有关详细信息,请参阅官方文档。 https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter

对于野生动物园:

 -webkit-backdrop-filter: blur(5px);

原文由 Dumitru 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题