如何在html让图片重叠

html-css016

如何在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）即可

使用伪类样式，设置div的属性position为absolute，

还有属性 z-index:1这个属性设置在层叠里的第几个层

代码如下：

<style type="text/css">

<!--

#Layer1 {

position:absolute

background-color:#0066FF

left:55px

top:26px

width:383px

height:291px

z-index:1

}

#Layer2 {

position:absolute

background-color:#FF0000

left:104px

top:57px

width:250px

height:218px

z-index:2

left: 58px

}

-->

</style>

<body>

<div id="Layer1">sss</div>

<div id="Layer2">aaa</div>

</body>