在css中，并没有可以直接实现马赛克的属性；
但是可以通过技巧来实现

• 实现思路
• 步骤1: 添加一个内容区
• 步骤2: 在内容区上方添加一个模糊滤镜

1. html

    <div class="filter-content">
      <img src="./img1.jpeg" style="width: 140px; height: 200px" />
    </div>

2. 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，或者图像处理软件来实现。