使用CSS实现图片叠加效果

方式一：一张作为背景，一张用<img/>图片标签，如：<div style="background:url('1.jpg') 0 0 no-repeat"><img src="2.jpg" /></div>方式二：两张图片都用<img/>标签，用绝对位置定位，利用z-index属性控制其上下层关系，z-index的值越大，就越大。如：&l

想做一只快乐的修狗

7734人浏览 · 2022-03-31 14:55:32

想做一只快乐的修狗 · 2022-03-31 14:55:32 发布

方式一：一张作为背景，一张用<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>