看標題估計也很難知道什麼是斜線拼接，為了快速知道斜線拼接是什麼意思，此處省去一堆廢話……
這篇文章我們來研究一下用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的使用原理，記住文中加粗的那句話。
短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！