使用feMorphology滤镜实现图片的马赛克效果实例页面

回到相关文章 »

效果：

原始图

马赛克图

代码：

CSS代码：

.mosaic {
  filter: url(#mosaic);
}

HTML代码：

<h4>原始图</h4>
<img src="1.jpg">
<h4>马赛克图</h4>
<img src="1.jpg" class="mosaic">

<svg>
  <filter id="mosaic">
    <feFlood x="4" y="4" height="2" width="2"/>
    <feComposite width="8" height="8"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate" radius="4"/>
  </filter>
</svg>