使用CSS mask 实现图片的斜线拼接_html/css_WEB-ITnose
程序员文章站
2022-04-07 19:23:43
...
每次必说题外话
话说貌似好久没有写技术文章了,自从娃娃出来后,很少能有时间做技术研究,思考的时间也不足。不过有得必有失,世上事也就酱紫了。但是作为一个前端攻城师,不写代码,不研究技术,是会被后浪拍死在沙滩上的。
碰巧前段时间碰到个CSS问题,一直很喜欢CSS的,能CSS解决的问题绝对不用JS,于是就抽时间整整看。
什么是斜线拼接
回到本文主题上,”斜线拼接“是我自创的词语,因为我也不知道怎么描述这个需求,o(╯□╰)o,实际的效果是下面所示:
眼力好的筒子应该就能发现,上面这张图是两个帅锅拼接在一起的,看中间的斜线。
但是呢,刚接到这个需求的时候,开发是抓狂的——第一反应就是用canvas画图,这得多累啊,只是要显示张图片而已,竟然还要动用一坨JS,O__O "…
不过依稀记得,CSS 貌似有个遮罩的特性,可以实现图片的部分显示的效果的。
CSS mask & linear gradient
要实现这个特性,就需要用到CSS遮罩和线性渐变。 至于这两个是什么东西,我就不班门弄斧的介绍了,毕竟这两个属性出生也挺久了的,不了解的筒子可以看这两篇文章 CSS遮罩——如何在CSS中使用遮罩 和 深入理解css3-gradient斜向线性渐变 。
先看下实际的效果
大家请看妹子中间(注意表看错了,是两个妹子的中间),有一条比较明显的分界线。多说无益,我知道你们想看demo, 用力戳这里>> 。
第一步,显示两张图
OK,先看代码,然后我再来解释。
上一篇: python函数 - cmp(x,y)
下一篇: Java高级教程:泛型方法
推荐阅读
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
使用 CSS3 伪元素实现立体的照片堆叠效_html/css_WEB-ITnose
-
Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose
-
用CSS3实现带小三角形的div框(不用图片)_html/css_WEB-ITnose
-
CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
-
网页图片通栏实现的思路,谁能指导一下?_html/css_WEB-ITnose
-
移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose
-
CSS中的背景图片加图片加文字如何实现,谢谢!_html/css_WEB-ITnose
-
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
-
效果已经实现,但是固定宽度的,我想用100%定义,图片就显示不了。_html/css_WEB-ITnose