使用CSS mask实现图片斜线拼接效果

转载地址:http://www.html5cn.org/article-9328-1.html

每次必说的题外话

 

　　话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

 

　　碰巧前段时间碰到个CSS问题，一直很喜欢CSS的，能CSS解决的问题绝对不用JS，于是就抽时间整整看。

 

　　什么是斜线拼接

 

　　回到本文主题上，”斜线拼接“是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

 

 

　　眼力好的同学应该就能发现，上面这张图是两个帅锅拼接在一起的，看中间的斜线。

 

　　但是呢，刚接到这个需求的时候，开发是抓狂的——第一反应就是用canvas画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨JS，O__O "…

 

　　不过依稀记得，CSS 貌似有个遮罩的特性，可以实现图片的部分显示效果。

 

　　CSS mask & linear gradient

 

　　要实现这个特性，就需要用到CSS遮罩和线性渐变。至于这两个是什么东西，我就不班门弄斧的介绍了，毕竟这两个属性出生也挺久了，不了解的童鞋可以看这两篇文章CSS遮罩——如何在CSS中使用遮罩和深入理解css3-gradient斜向线性渐变。

 

　　先看下实际效果

 

 

　　大家请看妹子中间(注意表看错了，是两个妹子的中间)，有一条比较明显的分界线。多说无益，我知道你们想看demo，用力戳这里>>。

 

　　第一步，显示两张图

　　OK，先看代码，然后我再来解释。

1	<div class="img-container">

2	<div class="img-left"></div>

3	<div class="img-right"></div>

4

</div>

　　然后是CSS

01	.img-container{

02	position: relative;

03	width: 200px;

04	height: 200px;

05	border: 5px solid #40BCFF;

06

}

07

08	.img-left{

09	background: url(img/left.jpg);

10	background-size: cover;

11	width: 100%;

12	height: 100px;

13

}

14

15	.img-right{

16	background: url(img/right.jpg);

17	background-size: cover;

18	width: 100%;

19	height: 100px;

20

}

　　OK，看下效果

 

　　小明：尼玛，这不是坑爹么，这么简单谁不会?

 

　　小朋友，别急，我们两个主角还没上了。

 

　　画个斜线

　　为了实现斜线拼接，你总得有个斜线吧?把img-right的背景换成一个带有“斜线”的图，这个就不用“真”图片啦，CSS渐变就能完成，如下：

1	.img-right{

2	background: -webkit-linear-gradient(left top, blue 50%, white 50%);

3

}

 

 

　　好，把背景换成真实的美女，渐变图作为mask

1	.img-right{

2	background: url(img/right.jpg);

3	background-size: cover;

4	-webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, white 50%);

5

}

　　But，如果你这么做了，会发现看到的是完整的图，并没有被遮盖，跟下图一样。

 

　　这是因为css mask的原理是，它只会把遮罩图里透明像素所对应的原图部分进行隐藏，而我们的渐变图是完全不透明的(我们是蓝白色相间的)，所以没有遮罩效果。那么把蓝色改成透明试试。

1	.img-right{

2	background: url(img/right.jpg);

3	background-size: cover;

4	-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);

5

}

　　当当当~~美女只显示一半啦!♪(^∇^*)

 

 

　　层叠

　　最后，把第二张图层在第一张上面，由于第二张图左边一半都是透明的，背景里的美女也能直接透过来啦。

1	.img-right{

2	position: absolute;

3

left: 0;

4

top: 0;

5

}

　　看下最终img-right所需要的样式代码

01	.img-right{

02	position: absolute;

03

left: 0;

04

top: 0;

05	background: url(img/right.jpg);

06	background-size: cover;

07	-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);

08	width: 100%;

09	height: 100%;

10

}

　　怎么样，很简单是吧?

 

　　CSS3有很多新鲜(其实这个不新鲜了~)的特性可以实现很多有趣的应用，如果你有其他方案，欢迎浏览讨论!