#backdrop-filter
利用backdrop-filter属性,你将可以对,元素背后的区块执行,诸如,模糊、变暗等操作。常应用于制作毛玻璃的效果。
#浏览器支持
#毛玻璃
这里以毛玻璃为例子,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfqVUXhD-1576144848851)
HTML:
backdrop-filter: blur(15px)
CSS:
.wrapper{ margin: 0 auto; width: 350px; height: 500px; background-image: url('https://www.ditto.ink/images/bg10.png'); background-position: center center; background-repeat: no-repeat; background-size: cover;}.container{ display: flex; justify-content: center; align-items: center;}.box{ width: 350px; height: 50px; backdrop-filter: blur(15px); background-color: rgba(255, 255, 255, 0.3); color: rgba(255,255,255,.5); text-align: center;}