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