前言
马赛克效果相信大家都见过吧，但是如何实现马赛克效果大家知道吗？比较常见的方式有对背景模糊处理。除了这个方法，其实还有一个 CSS 属性可以实现这个效果 —— image-rendering: pixelated。当然仅仅靠这个方法来实现马赛克效果就太单调啦，需要配合一些其他内容来丰富一下马赛克了。
进入主题
这个“不一样”的马赛克将全程纯 CSS 来实现，因此不用担心 JS 不会了。最终效果在文末可查看。
前期准备
我们实现的是一个可悬停的像素化马赛克，悬停知道，像素化马赛克也知道，将它俩结合到一起就是我们需要的 CSS 效果了。
我们需要准备两张图片，这两张图片有讲究，尽量选择正方形尺寸的图片，以及尺寸应为平方倍（就是如果一张图片尺寸为 900X900，那么另一张图片就应该为 30X30）。为啥要这么做呢？因为我这里的马赛克就是用 30X30 的图片来实现的，因此这样做就可以完美覆盖整张 900X900 的图，这样就达到了马赛克的效果。
我这里采用的是 900X900 以及 30X30 尺寸的图片，如下所示：
<body><div class="wrapper"><div class="container"&g
最低0.47元/天 解锁文章
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
