在css中，并没有可以直接实现马赛克的属性；
但是可以通过技巧来实现
- 实现思路
- 步骤1: 添加一个内容区
- 步骤2: 在内容区上方添加一个模糊滤镜
- html
<div class="filter-content">
<img src="./img1.jpeg" style="width: 140px; height: 200px" />
</div>
- css
.filter-content {
position: relative;
font-size: 20px;
}
.filter-content::before {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(4px); /* 控制模糊程度 */
transform: scale(1); /* 设置马赛克方块的大小， 默认值1 */
}
-
filter-content是我们的内容区 -
filter-content::before伪元素是我们的滤镜层 - 通过
backdrop-filter: blur(4px)和transform: scale(1)来控制马赛克。
注意点：
1、transform: scale(1)只是把模糊层放大
2、这并不是真正的马赛克实现，这是一个使用css模拟实现的马赛克；要实现真正意义上的马赛克，需要用到javascript，或者图像处理软件来实现。
