看标题估计也很难知道什么是斜线拼接，为了快速知道斜线拼接是什么意思，此处省去一堆废话……

这篇文章我们来研究一下用CSS3属性怎么实现下面这张图效果。

上面这图是由两张图构成的，使用的是css3属性mask和linear gradient。没什么难的。通过这个实例我们就能理解这两个属性是怎么用的了。

一、先来显示两张图

DOM结构：

<div class="wrapper">

<div class="left"></div>

<div class="right"></div>

</div>

样式内容：

.wrapper{

position: relative;

width: 360px;

border: 5px solid #fff;

}

.left{

background: url(1.png);

background-size: cover;

width: 100%;

height: 200px;

}

.right{

background: url(2.png);

background-size: cover;

width: 100%;

height: 200px;

}

显示结果是这样的：

这很简单，很好理解，没什么难的，下面开始重点内容了

二、画个斜线

为了实现斜线拼接，你总得有个斜线吧？把下面那个美女图换成一个斜线图。

.right{

background: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);

}

结果变成这个样子的：

没错，美女图不见了，不急，下面我们在换回来。

三、换回美女图

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

.right{

background: url(2.png);

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

}

这个时候又回到了显示两张图的效果。是的，没错，那是因为：

Mask的原理是：它只会把遮罩图里透明像素所对应的原图部分进行隐藏，而我们的渐变是完全不透明的。所以就没有遮罩效果。

现在来改一下mask:

.right{

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

}

这样子就对了，效果如下图所示：

四、层叠两张图

给下面那个美女图区加个定位：

.right{

position:absolute;

left:0;

top:0;

}

这样就得到文章一开始的那个两张图拼接的效果了。本文最关键是理清css3属性mask和linear gradient的使用原理，记住文中加粗的那句话。

短内容，说完整事，哪怕只读一篇也能学知识。点击关注小郑搞码事，说的都是那堆代码。谢谢您的鼓励！