css教程看看图片马赛克风格化效果用CSS怎么实现？

<canvas width="100" height="50" ></canvas>

canvas {
  width: 200px;
  height: 200px;
}

  <input id="file" type="file" accept="image/*" />
  <canvas id="canvas"></canvas>
  <img id="img-raw" />
  <label for="compress-times">压缩倍数：</label>
  <input id="compress-times" type="number" value="12">
  <button>马赛克化</button>

    canvas {
      display: block;
      border: gray solid 1px;
      width: 600px;
      height: 600px;
      image-rendering: pixelated;
    }

    img {
      display: none;
    }

    let imgBlobUrl;
    const file = document.getElementById('file');
    const img = document.getElementById('img-raw');
    const compressTimes = document.getElementById('compress-times');
    const defaultCompressTimes = compressTimes.value | 0;
    const canvas = document.getElementById('canvas');
    const button = document.querySelector('button');

    const boundingRect = canvas.getBoundingClientRect();
    const ctx = canvas.getContext('2d');
    const canvas_w = boundingRect.width;
    const canvas_h = boundingRect.height;

    // 以 background-size: contain 形式设置图片尺寸
    function matchImgSizeToCanvas(imgElem = img) {
      let w = imgElem.width;
      let h = imgElem.height;
      if (w > canvas_w || h > canvas_h) {
        let radio = Math.max(h / canvas_h, w / canvas_w);
        radio = Number(radio.toFixed(2));
        imgElem.width = parseInt(w / radio);
        imgElem.height = parseInt(h / radio);
      }
    }

    // 绘制 1/N 大小的图像，画布宽高属性设为样式宽高的 1/N，从而实现画布内容的 N 倍放大
    function run() {
      let ct = parseInt(compressTimes.value) || defaultCompressTimes;
      canvas.width = parseInt(canvas_w / ct);
      canvas.height = parseInt(canvas_h / ct);
      ctx.drawImage(img, 0, 0, parseInt(img.width / ct), parseInt(img.height / ct));
    }

    function cleanCanvas() {
      ctx.clearRect(0, 0, canvas_w, canvas_h);
    }

    function reset() {
      img.removeAttribute('width');
      img.removeAttribute('height');
      cleanCanvas();
      matchImgSizeToCanvas(img);
      run();
    }

    file.addEventListener('change', function (e) {
      window.URL.revokeObjectURL(imgBlobUrl);
      const picFile = this.files[0];
      imgBlobUrl = window.URL.createObjectURL(picFile);
      img.onload = function init() {
        reset();
      }
      img.src = imgBlobUrl;
    }, false);

    button.addEventListener('click', reset, false);

/** @file mosaic.js **/

class Mosaic {
    constructor(url, container, options = {}) {
        if (typeof container === 'string') {
            container = document.querySelector(container);
        }

        if (!url || !container?.style) {
            console.error('参数不正确');
        }

        this.url = url;
        this.options = options;
        this.container = container;

        this.init();
    }
    init() {
        const img = new Image();
        const canvas = document.createElement('canvas');
        canvas.style.position = 'absolute';
        canvas.style.zIndex = 999;
        canvas.style.imageRendering = 'pixelated';
        this.img = img;
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        const containerBoundingRect = this.container.getBoundingClientRect();
        const container_w = containerBoundingRect.width;
        const container_h = containerBoundingRect.height;

        // 通过样式初始化画布尺寸为容器尺寸
        canvas.style.width = container_w + 'px';
        canvas.style.height = container_h + 'px';

        img.onload = () => {
            this.run(container_w, container_h);
        }

        img.src = this.url;
    }
    run(w, h) {
        // 缩小倍数，可以由参数传入，默认为 12
        const compressTimes = parseInt(this.options.compressTimes) || 12;
        let compress_w = parseInt(w / compressTimes);
        let compress_h = parseInt(h / compressTimes);
        // 修改画布尺寸属性为 1/缩小倍数
        this.canvas.width = compress_w;
        this.canvas.height = compress_h;
        // 绘制图片覆盖缩小后的画布
        this.ctx.drawImage(this.img, 0, 0, compress_w, compress_h);
        this.container.prepend(this.canvas);
        this.img = null;
    }
    remove() {
        this.container.removeChild(this.canvas);
        this.canvas = null;
    }
}

export default Mosaic;

/** @file plugin-demo.html **/
<head>
  <style>
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      float: left;
      line-height: 0;
      margin: 0 20px 20px 0;
    }

    li>img {
      max-height: 180px;
    }

    div {
      display: block;
      clear: both;
    }
  </style>
</head>

<body>
  <ul>
    <li><img src="./assert/0.png" /></li>
    <li><img src="./assert/1.png" /></li>
    <li><img src="./assert/2.png" /></li>
    <li><img src="./assert/3.png" /></li>
  </ul>
  <div>
    <button id="generate">铺上马赛克</button>
    <button id="remove">移除马赛克</button>
  </div>


  <script type="module">
    import Mosaic from './mosaic.js';

    let liElems = document.querySelectorAll('li');
    let mosaicList = [];

    document.querySelector('#generate').onclick = () => {
      remove();
      for (let i = 0; i < liElems.length; i++) {
        let liElem = liElems[i];
        let url = liElem.querySelector('img').src;
        let mosaic = new Mosaic(url, liElem);
        mosaicList.push(mosaic);
      }
    }

    function remove() {
      mosaicList.forEach((mosaic) => {
        mosaic.remove();
      });
      mosaicList.length = 0;
    }

    document.querySelector('#remove').onclick = remove;

  </script>
</body>