每次必說題外話
話說貌似好久沒有寫技術文章了，自從娃娃出來後，很少能有時間做技術研究，思考的時間也不足。不過有得必有失，世上事也就醬紫了。但是作為一個前端攻城師，不寫程式碼，不研究技術，是會被後浪拍死在沙灘上的。
碰巧前段時間碰到個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，看下效果
小明：尼瑪，這不是坑爹麼，這麼簡單誰不會？
小朋友，別急，我們兩個主角還沒上了。
畫個斜線
為了實現斜線拼接，你總得有個斜線吧？把img-right的背景換成一個帶有“斜線”的圖，這個就不用“真”圖片啦，CSS漸變就能完成，如下：
|
1 2 3 |
.img-right{ background: -webkit-linear-gradient(left top, blue 50%, white 50%); } |
好，把背景換成真實的美女，漸變圖作為mask
|
1 2 3 4 5 |
.img-right{ background: url(img/right.jpg); background-size: cover; -webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, white 50%); } |
But，如果你這麼做了，會發現看到的是完整的圖，並沒有被遮蓋，跟下圖一樣。
這是因為css mask的原理是，它只會把遮罩圖裡透明畫素所對應的原圖部分進行隱藏，而我們的漸變圖是完全不透明的（我們是藍白色相間的），所以沒有遮罩效果。那麼把藍色改成透明試試。
|
1 2 3 4 5 |
.img-right{ background: url(img/right.jpg); background-size: cover; -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%); } |
噹噹噹~~美女只顯示一半啦！♪(^∇^*)
層疊
最後，把第二張圖層在第一章上面，由於第二張圖左邊一半都是透明的，背景裡的美女也能直接透過來啦。
|
1 2 3 4 5 |
.img-right{ position: absolute; left: 0; top: 0; } |
看下最終img-right所需要的樣式程式碼
|
1 2 3 4 5 6 7 8 9 10 |
.img-right{ position: absolute; left: 0; top: 0; background: url(img/right.jpg); background-size: cover; -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%); width: 100%; height: 100%; } |
怎麼樣，很簡單是吧？
CSS3有很多新鮮（其實這個不新鮮了~）的特性可以實現很多有趣的應用，如果你有其他方案，歡迎瀏覽討論，O(∩_∩)O謝謝閱讀！