如何在html让图片重叠

如何在html让图片重叠,第1张

有两种方式;

①:一张作为背景,一张用<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>

同一个元素不能设置2个背景图片的,当然可以这样做,写一个盒子(div)固定宽高,添加背景图片,,然后在这个div里面再写一个div和外围的div等宽高,样式加一个position:absolute属性,绝对定位来使两个div重叠,然后给它设置背景图片(background:url(../1.jpg)no-repeat center)即可


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7412448.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存