我有两个图像一个较小,一个较大。如何在另一个图像上显示图像
如何在另一个上显示一个?
我的代码:
<img src="big.jpeg" class="img" id="big">
<img src="small.jpeg" class="img" id="sml">
我有两个图像一个较小,一个较大。如何在另一个图像上显示图像
如何在另一个上显示一个?
我的代码:
<img src="big.jpeg" class="img" id="big">
<img src="small.jpeg" class="img" id="sml">
<div id="a1">
<img src="http://i.stack.imgur.com/Pxx6V.jpg" id="a1">
<img src="http://i.stack.imgur.com/kFxC6.jpg" id="a2">
</div>
#a1
{position:relative}
#a2
{position:absolute; top:25px; left:50px;}
使用position:absolute
div.images{
border:solid green 4px;
height:120px;
width:120px;;
margin-top: 50px;
position:relative;
}
.images img{
position:absolute;
top:0;
left:0
}
你需要使用样式绝对定位。将这两个图像放在一个div
中,用作抵消图像位置的容器。然后,为每个图像添加绝对定位,并使用left
和top
样式属性来定位它们。另外,为每个图像添加一个z-index
样式属性。具有最高z-index
属性的图像将置于顶部。
<div style="position: relative">
<img src="big.jpeg" class="img" id="big" style="position: absolute; left: 0; top: 0; z-index: 0"/>
<img src="small.jpeg" class="img" id="sml" style="position: absolute; left: 0; top: 0; z-index: 1"/>
</div>
你可以使用CSS3 background-image属性或使用位置:绝对 – Era