使用 CSS 和 jQuery 制作文字马赛克效果

需求

一段文本中，给指定的文字打上马赛克，然后付费阅读

解决方法

方法一：使用 CSS 模糊文字

span.mosaic {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

上面的代码使class为mosaic的<span>中的文字变得透明，只保留文字的text-shadow，从而模拟出一种文字模糊的效果。你可以通过text-shadow属性的第三个参数来调整文字模糊的效果。

效果：

效果图

增加 IE 支持

span.mosaic {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
    zoom: 1;
}

这种办法是以模糊文字来达到马赛克效果，但是有时客户会要求用其它图片或者符号来替换被打了马赛克的文字，这种办法就无法满足了。

方法二：使用图片马赛克遮罩文字

效果一

因为直接接给标签samp加上图片遮罩层，在原本文字换行的情况下，会直接显示在下一行，破坏原本的结构。

效果二

在效果一基础上，为了不破坏原本的结构。需要将一段文字拆分成单个文字，然后使用标签span包裹，最后使用 span::before 给每个文字增加一个图片遮罩层。

效果实例：

<a href="http://codepen.io/spaling/pen/vgMPNy/">文字马赛克</a>