当前位置:首页 > 前端技术 > 使用CSS实现图片叠加效果

使用CSS实现图片叠加效果

方式一:一张作为背景,一张用<img/>图片标签,如:

<div style="background:url('1.jpg') 0 0 no-repeat">
    <img src="2.jpg" />
</div>

方式二:两张图片都用<img/>标签,用绝对位置定位,利用z-index属性控制其上下层关系,z-index的值越大,就越大。如:

<div style="position:relative">
    <img src="1.jpg" style="position:absolute; left:0; top:0; z-index:1;" />
    <img src="1.jpg" style="position:absolute; left:0; top:0; z-index:2;" />
</div>

作者:想做一只快乐的修狗
来源链接:https://blog.csdn.net/weixin_44109827/article/details/123872218


版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。





本文链接:https://www.javaclub.cn/front/69026.html

标签: css
分享给朋友: