使用CSS mask 實現圖片的斜線拼接
每次必說題外話
話說貌似好久沒有寫技術文章了，自從娃娃出來后，很少能有時間做技術研究，思考的時間也不足。不過有得必有失，世上事也就醬紫了。但是作為一個前端攻城師，不寫代碼，不研究技術，是會被后浪拍死在沙灘上的。
碰巧前段時間碰到個CSS問題，一直很喜歡CSS的，能CSS解決的問題絕對不用JS，于是就抽時間整整看。
什么是斜線拼接
回到本文主題上，”斜線拼接“是我自創的詞語，因為我也不知道怎么描述這個需求，o(╯□╰)o，實際的效果是下面所示：
眼力好的筒子應該就能發現，上面這張圖是兩個帥鍋拼接在一起的，看中間的斜線。
但是呢，剛接到這個需求的時候，開發是抓狂的——第一反應就是用canvas畫圖，這得多累啊，只是要顯示張圖片而已，竟然還要動用一坨JS，O__O "…
不過依稀記得，CSS 貌似有個遮罩的特性，可以實現圖片的部分顯示的效果的。
CSS mask & linear gradient
要實現這個特性，就需要用到CSS遮罩和線性漸變。 至于這兩個是什么東西，我就不班門弄斧的介紹了，畢竟這兩個屬性出生也挺久了的，不了解的筒子可以看這兩篇文章 CSS遮罩——如何在CSS中使用遮罩 和 深入理解css3-gradient斜向線性漸變 。
先看下實際的效果
大家請看妹子中間（注意表看錯了，是兩個妹子的中間），有一條比較明顯的分界線。多說無益，我知道你們想看demo， 用力戳這里>> 。
第一步，顯示兩張圖
OK，先看代碼，然后我再來解釋。
<divclass="img-container"> <divclass="img-left"></div> <divclass="img-right"></div> </div>
然后是CSS
.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漸變就能完成，如下：
.img-right{
background: -webkit-linear-gradient(lefttop, blue 50%, white 50%);
}
好，把背景換成真實的美女，漸變圖作為mask
.img-right{
background: url(img/right.jpg);
background-size: cover;
-webkit-mask-image: -webkit-linear-gradient(lefttop, blue 50%, white 50%);
}But，如果你這么做了，會發現看到的是完整的圖，并沒有被遮蓋，跟下圖一樣。
這是因為css mask的原理是，它只會把遮罩圖里透明像素所對應的原圖部分進行隱藏，而我們的漸變圖是完全不透明的（我們是藍白色相間的），所以沒有遮罩效果。那么把藍色改成透明試試。
.img-right{
background: url(img/right.jpg);
background-size: cover;
-webkit-mask-image: -webkit-linear-gradient(lefttop, transparent 50%, white 50%);
}
當當當~~美女只顯示一半啦！?(^?^*)
層疊
最后，把第二張圖層在第一章上面，由于第二張圖左邊一半都是透明的，背景里的美女也能直接透過來啦。
.img-right{
position: absolute;
left: 0;
top: 0;
}
看下最終img-right所需要的樣式代碼
.img-right{
position: absolute;
left: 0;
top: 0;
background: url(img/right.jpg);
background-size: cover;
-webkit-mask-image: -webkit-linear-gradient(lefttop, transparent 50%, white 50%);
width: 100%;
height: 100%;
}怎么樣，很簡單是吧？
CSS3有很多新鮮（其實這個不新鮮了~）的特性可以實現很多有趣的應用，如果你有其他方案，歡迎瀏覽討論，O(∩_∩)O謝謝閱讀！
來自： http://www.alloyteam.com/2016/02/use-the-css-of-the-mask-to-achieve-a-picture-diagonal-mosaic/