微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

使用 CSS mask 实现图片的斜线拼接

2016-02-10 20:58 前端大全

(点击上方,可快速关注)

来源:AlloyTeam 

网址:http://www.alloyteam.com/2016/02/use-the-css-of-the-mask-to-achieve-a-picture-diagonal-mosaic/


每次必说题外话


话说貌似好久没有写技术文章了,自从娃娃出来后,很少能有时间做技术研究,思考的时间也不足。不过有得必有失,世上事也就酱紫了。但是作为一个前端攻城师,不写代码,不研究技术,是会被后浪拍死在沙滩上的。


碰巧前段时间碰到个CSS问题,一直很喜欢CSS的,能CSS解决的问题绝对不用JS,于是就抽时间整整看。


什么是斜线拼接


回到本文主题上,”斜线拼接“是我自创的词语,因为我也不知道怎么描述这个需求,o(╯□╰)o,实际的效果是下面所示:



眼力好的筒子应该就能发现,上面这张图是两个帅锅拼接在一起的,看中间的斜线。


但是呢,刚接到这个需求的时候,开发是抓狂的——第一反应就是用canvas画图,这得多累啊,只是要显示张图片而已,竟然还要动用一坨JS,O__O “…


不过依稀记得,CSS 貌似有个遮罩的特性,可以实现图片的部分显示的效果的。


CSS mask & linear gradient


要实现这个特性,就需要用到CSS遮罩和线性渐变。 至于这两个是什么东西,我就不班门弄斧的介绍了,毕竟这两个属性出生也挺久了的,不了解的筒子可以看这两篇文章CSS遮罩——如何在CSS中使用遮罩和深入理解css3-gradient斜向线性渐变。


先看下实际的效果



大家请看妹子中间(注意表看错了,是两个妹子的中间),有一条比较明显的分界线。


第一步,显示两张图


OK,先看代码,然后我再来解释。


<div class="img-container">

        <div class="img-left"></div>

        <div class="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(left top, blue 50%, white 50%);

}



好,把背景换成真实的美女,渐变图作为mask


.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的原理是,它只会把遮罩图里透明像素所对应的原图部分进行隐藏,而我们的渐变图是完全不透明的(我们是蓝白色相间的),所以没有遮罩效果。那么把蓝色改成透明试试。


.img-right{

    background: url(img/right.jpg);

    background-size: cover;

    -webkit-mask-image: -webkit-linear-gradient(left top, 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(left top, transparent 50%, white 50%);

        width: 100%;

        height: 100%;

}


怎么样,很简单是吧?


CSS3有很多新鲜(其实这个不新鲜了~)的特性可以实现很多有趣的应用,如果你有其他方案,欢迎浏览讨论,O(∩_∩)O谢谢阅读!



【今日微信公号推荐↓】

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 程序员不仅仅是写代码 别怪程序员——都是项目经理的错 在Stack Overflow提问的检查表 零基础自学 Android 并去找工作可行性大么? 小米论坛800万用户数据库泄漏 网盘中已经可下载