本文正在参加「 . 」
前言
马赛克效果相信大家都见过吧,但是如何实现马赛克效果大家知道吗?比较常见的方式有对背景模糊处理。除了这个方法,其实还有一个 CSS
属性可以实现这个效果 —— image-rendering: pixelated
。当然仅仅靠这个方法来实现马赛克效果就太单调啦,需要配合一些其他内容来丰富一下马赛克了。
进入主题
这个“不一样”的马赛克将全程纯 CSS
来实现,因此不用担心 JS
不会了。最终效果在文末可查看。
前期准备
我们实现的是一个可悬停的像素化马赛克,悬停知道,像素化马赛克也知道,将它俩结合到一起就是我们需要的 CSS
效果了。
我们需要准备两张图片,这两张图片有讲究,尽量选择正方形尺寸的图片,以及尺寸应为平方倍(就是如果一张图片尺寸为 900X900,那么另一张图片就应该为 30X30)。为啥要这么做呢?因为我这里的马赛克就是用 30X30 的图片来实现的,因此这样做就可以完美覆盖整张 900X900 的图,这样就达到了马赛克的效果。
我这里采用的是 900X900 以及 30X30 尺寸的图片,如下所示:
<body>
<div class="wrapper">
<div class="container">
<img src="./900x900.jpg" alt="">
<img src="./30x30.jpg" alt="">
</div>
</div>
</body>
以下就是我的文件结构了。
CSS 样式设计
完成准备工作后,开始进行 CSS
样式设计了。整体设计不难,对图片进行样式处理,规定好图片大小尺寸以及排版效果(这里就一张图片,排版效果就不用大费周章了