CSS backdrop-filter 实现毛玻璃效果 无需定位裁剪图片

文章目录

  • 介绍
  • 一、效果
  • 二、代码
    • 1.HTML部分
    • 2.CSS部分
  • 总结


介绍

利用伪类+CSS backdrop-filter 实现毛玻璃效果,无需将图片进行叠层或裁剪。
backdrop-filter 是一种CSS属性,可以为一个元素后面区域添加图形效果(如模糊或颜色偏移)。

参考自 MDN CSS backdrop-fliter


一、效果

CSS backdrop-filter 实现毛玻璃效果 无需定位裁剪图片_第1张图片

二、代码

1.HTML部分

<div class="links">
	<div class="sheet">
	    <div class="link">
	        <div class

你可能感兴趣的:(样式,css,前端)