CSS实现图片的斜线拼接
这篇文章要让大家知道怎么用CSS3属性实现下面这张图效果。
一、先来显示两张图
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper{
position: relative;
width: 360px;
border: 5px solid #fff;
}
.left{
background: url(left-img.png);
background-size: cover;
width: 100%;
height: 248px;
}
.right{
background: url(right-img.png);
background-size: cover;
width: 100%;
height: 248px;
}
结果是这样子的：
这不就是显示两张图片嘛！！
据调查，只要做前端的同学，这个时候100%的人都会说，So Easy~~，是的。
没错，我只想对你说，只要你理解了linear gradient属性的使用，一切都很简单。
GO~~~
二、画个斜线
为了实现斜线拼接，你总得有个斜线吧？把下面那个美女图换成一个斜线图。啊！！我也舍不换得~~·
.right{
background: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);
}
结果是这样子的：
三、换回美女图
把背景换成真实的美女，渐变图作为mask。
.right{
-webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, #ddd 50%);
}
这回换回来了，大家都高兴了，因为比起学习不如看美女，如果两个可以同时，那不更美~~~~~哈哈
结果是这样的：
啊，没有被遮盖，碰到这总事不要急，我只能说，问题还需要推敲。
Mask的原理是：它只会把遮罩图里透明像素所对应的原图部分进行隐藏，而我们的渐变是完全不透明的。所以就没有遮罩效果。改过一个，来来来
.right{
-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, #ddd 50%);
}
结果变成这样子:
好了吧，现在知道理解一个属性的应用有多重要的吧，据说在北京理解一个属性比买房都重要~~~~~~~~
四、层叠两张图
.right{
position:absolute;
left:0;
top:0;
background: url(right-img.png);
background-size: cover;
width: 100%;
height: 248px;
-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
}
结果就是第一张图的样子，简单吧，是的。
总结：有一句话怎么说来着，“思考比勤奋更重要”，加油~~~~
更多 前端资源 关注公众号：一起讨论 一起学习 一起进步
