CSS实现图片的斜线拼接

看标题估计也很难知道什么是斜线拼接，为了很快进入正事，此处省去一堆废话……。

这篇文章要让大家知道怎么用CSS3属性实现下面这张图效果。

 当然，用到的CSS3属性 mask & linear gradient。这里要对这两个属性的使用理解非常透彻。

一、先来显示两张图

<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%);

}

结果就是第一张图的样子，简单吧，是的。

总结：有一句话怎么说来着，“思考比勤奋更重要”，加油~~~~

更多 前端资源 关注公众号：一起讨论 一起学习 一起进步

转载于:https://www.cnblogs.com/zhengwenping/p/5243051.html