html - 模糊图像前面的元素

标签 html css reactjs blur

大家好。我有这个问题。所以我有一个形象。在该图像的前面是具有宽度和高度的简单元素。我想模糊那个元素,所以它看起来像图片的那部分是模糊的。我不能在那个元素中有任何图像或背景图像。我想在不使用任何附加图像的情况下实现这种效果,仅使用 css。我尝试添加背景颜色,降低不透明度并添加过滤器:模糊,但效果不佳。我仍然可以阅读本应模糊处理的文本。

最佳答案

目前,如果没有 javascript,则不可能在完全支持的情况下做到这一点。但是如果你想支持一组有限的浏览器,你可以使用 backdrop-filter

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

关于html - 模糊图像前面的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49960663/

相关文章:

javascript - jQuery - 添加热键

html - 将两个并排的 div 居中,在缩小窗口屏幕大小时使 div float

css - 如何获得流畅的谷歌字体?

javascript - Gatsby Markdown 图像卡在模糊的范围内

javascript - 选取框循环不是无限的

html - 使导航菜单跨度浏览器的长度

javascript - 单击删除链接后不需要的页面更改

javascript - 如何在用户将移动设备切换为横向时刷新网页

javascript - 在 React div 中渲染对象有什么意义吗?

javascript - react JSX : href path inside an array of anchor tags is referencing the last path in a loop