如何快速用SVG实现长尾词马赛克效果？

本文共计1596个文字，预计阅读时间需要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; // 使用能最大化图像客观观感的算法来缩放图像。