每次必说题外话
话说貌似好久没有写技术文章了,自从娃娃出来后,很少能有时间做技术研究,思考的时间也不足。不过有得必有失,世上事也就酱紫了。但是作为一个前端攻城师,不写代码,不研究技术,是会被后浪拍死在沙滩上的。
碰巧前段时间碰到个CSS问题,一直很喜欢CSS的,能CSS解决的问题绝对不用JS,于是就抽时间整整看。
什么是斜线拼接
回到本文主题上,”斜线拼接“是我自创的词语,因为我也不知道怎么描述这个需求,o(╯□╰)o,实际的效果是下面所示:
眼力好的筒子应该就能发现,上面这张图是两个帅锅拼接在一起的,看中间的斜线。
但是呢,刚接到这个需求的时候,开发是抓狂的——第一反应就是用canvas画图,这得多累啊,只是要显示张图片而已,竟然还要动用一坨JS,O__O "…
不过依稀记得,CSS 貌似有个遮罩的特性,可以实现图片的部分显示的效果的。
CSS mask & linear gradient
要实现这个特性,就需要用到CSS遮罩和线性渐变。 至于这两个是什么东西,我就不班门弄斧的介绍了,毕竟这两个属性出生也挺久了的,不了解的筒子可以看这两篇文章 CSS遮罩——如何在CSS中使用遮罩 和 深入理解css3-gradient斜向线性渐变 。
先看下实际的效果
大家请看妹子中间(注意表看错了,是两个妹子的中间),有一条比较明显的分界线。多说无益,我知道你们想看demo, 用力戳这里>> 。
第一步,显示两张图
OK,先看代码,然后我再来解释。