如何快速使用SVG实现马赛克效果构建？

本文共计1593个文字，预计阅读时间需要7分钟。

目录+前言+为何+image-rendering？+image-rendering: pixelated 实现马赛克效果的局限性+利用 CSS 再图缩小后放大？+SVG+滤镜叠加实现马赛克效果+CSS/SVG+实现马赛克的局限性+最后+前言+之友

目录

• 前言
• 何为 image-rendering？
• image-rendering: pixelated 实现马赛克效果的局限性
• 利用 CSS 再图片缩小后再放大？
• SVG 滤镜叠加实现马赛克效果
• CSS/SVG 实现马赛克的局限性
• 最后

前言

之前好友Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化。

核心是利用了 CSS 中一个很有意思的属性 -- image-rendering，它可以用于设置图像缩放算法。

何为 image-rendering？

CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

语法比较简单：

{ image-rendering: auto; // 默认值，使用双线性（bilinear）算法进行重新采样（高质量） image-rendering: smooth; // 使用能最大化图像客观观感的算法来缩放图像。