每次必说题外话

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

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

什么是斜线拼接

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

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

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

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

CSS mask & linear gradient

要实现这个特性,就需要用到CSS遮罩和线性渐变。

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

先看下实际的效果

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

第一步,显示两张图

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谢谢阅读!

Comments
Write a Comment
  • 幻狐岚 reply

    用clip-path也可以

  • iAzrael reply

    @幻狐岚 也行,但是clip-path用起来相对麻烦些

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟