每次必说题外话

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

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

什么是斜线拼接

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

example

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

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

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

CSS mask & linear gradient

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

先看下实际的效果

拼接效果图

大家请看妹子中间(注意表看错了,是两个妹子的中间),有一条比较明显的分界线。多说无益,我知道你们想看demo,用力戳这里>>

第一步,显示两张图

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

然后是CSS

OK,看下效果

小明:尼玛,这不是坑爹么,这么简单谁不会?

小朋友,别急,我们两个主角还没上了。

画个斜线

为了实现斜线拼接,你总得有个斜线吧?把img-right的背景换成一个带有“斜线”的图,这个就不用“真”图片啦,CSS渐变就能完成,如下:

QQ截图20160204112221

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

But,如果你这么做了,会发现看到的是完整的图,并没有被遮盖,跟下图一样。

这是因为css mask的原理是,它只会把遮罩图里透明像素所对应的原图部分进行隐藏,而我们的渐变图是完全不透明的(我们是蓝白色相间的),所以没有遮罩效果。那么把蓝色改成透明试试。

QQ截图20160204113645

当当当~~美女只显示一半啦!♪(^∇^*)

层叠

最后,把第二张图层在第一章上面,由于第二张图左边一半都是透明的,背景里的美女也能直接透过来啦。

拼接效果图

看下最终img-right所需要的样式代码

怎么样,很简单是吧?

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

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2016/02/use-the-css-of-the-mask-to-achieve-a-picture-diagonal-mosaic/

  1. 邓映山 2016 年 10 月 12 日

    博主,-webkit-linear-gradient(left top, blue 50%, white 50%) 这个用法好像已经弃用了吧,不明白background: -webkit-linear-gradient(left top, blue 50%, white 50%);background: linear-gradient(to right bottom, blue 50%, white 50%);这两种写法为啥不一样,按照 MDN 上的说说法是推荐后后者,那么如果用后者,那么博主这篇文章的斜向拼接效果好像就实现不了了。

    • xwang 2017 年 9 月 4 日

      用后者的话,只能写成-webkit-mask-image: linear-gradient(115deg, transparent 50%, white 50%);

  2. 邓映山 2016 年 10 月 12 日

    @博主 background: -webkit-linear-gradient(left top, blue 50%, white 50%); background: linear-gradient(to right bottom, blue 50%, white 50%); 这两个效果怎么不同呢?

  3. 孙伟 2016 年 5 月 10 日

    我想和LZ一样做个快乐的逗逼~

  4. 段立新 2016 年 5 月 6 日

    最后一段代码,height:100% 手误了吧, 应该是 height:100px;

  5. 一猫当先 2016 年 4 月 3 日

    也可以完全用css旋转实现,右边用两层div,内层设置背景图,外层正向旋转,内层反向旋转

  6. 艾尔星系 2016 年 4 月 3 日

    请问兼容性如何 因为只看到了-webkit
    这对不擅长琢磨代码的UI设计新人们简直是福音啊!

  7. kosl90 2016 年 3 月 2 日

    css的clip-path不好使,就用用svg的clip-path

  8. TransNet2013 2016 年 2 月 23 日

    美工!!!! 给我拼一下这个图, 哦了,是这样吧,恩,你可以领盒饭去了。

  9. 黑子 2016 年 2 月 22 日

    很赞

  10. 贺哥 2016 年 2 月 19 日

    思路确实不错,移动端玩玩还是很不错的,pc不适用的,clip-path支持还没有渐变兼容性好

  11. 路过酱油 2016 年 2 月 16 日

    貌似IE全系列都不支持

  12. llama 2016 年 2 月 16 日

    好厉害

  13. kk 2016 年 2 月 16 日

    [可怜][放鞭炮]

  14. Brian 2016 年 2 月 15 日

    用clip-path实现也可以

  15. 互联网fans 2016 年 2 月 15 日

    收藏了

  16. 互联网fans 2016 年 2 月 15 日

    不错

  17. 郭野 2016 年 2 月 15 日

    学习了

  18. ScarFace 2016 年 2 月 14 日

    辣磨,怎么aa

  19. Owen 2016 年 2 月 12 日

    666

  20. 谢晓君 2016 年 2 月 7 日

    css还有很多要熟悉啊~

发表评论