backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。mdn介绍
示例:
代码:
<div class="img-box"><div class="bottom">backdrop-filter: blur(5px);</div></div>
.img-box {position: relative;width: 100%;height: 200px;background: url('./bg101010.png') 0 0 /100% 100%;}.bottom{position: absolute;bottom: 0;width: 100%;background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);min-height: 50px;font-size: 30px;color: #fff;}