本文隶属于分类

Web开发

推荐文章

广告推荐

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

标签:class   http   si   it   使用   la   src   sp   问题   

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

这篇文章要让大家知道怎么用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%);

}

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

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

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

技术分享

CSS实现图片的斜线拼接

标签:class   http   si   it   使用   la   src   sp   问题   

原文:http://www.cnblogs.com/zhengwenping/p/5243051.html

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

广告推荐

讨论区