代码之家 › 专栏 › 技术社区 › Pierre

使用CSS使两个透明图像重叠

overlap transparency image css

4

Pierre · 技术社区 · 16 年前

我正在尝试使两个透明图像(具有相同的大小/维度)在 div 在他们的左上角。我试过:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="margin:20px;">
<div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;">
<img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/>
<img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/>
</div>
</div>
</body>
</html>

但那不管用。相反,这两张图片在父级中连接在一起 分区 .

3 回复 | 直到 11 年前

1

6

kennytm 16 年前

试着做 #main 有 position:relative ,然后换两个 <img> 要使用 position:absolute .

2

1

carillonator 16 年前

制作第二个图像 position:absolute 和主要的 position:relative

3

0

Adam Kiss 16 年前

只是一个音符:

position:relative 和 position:absolute 参照 0;0 最近的父级,其中 位置:相对 或 位置:绝对 . 如果没有你的 div S有,那么它指的是 0;0 (上;左)文档( body )

位置:相对 -顶部和左侧是指元素的自然流量值之间的差异,即“图像”是否具有自然流量。 x 1500和 y 1200个, top: 150px; left: -50px; 将它移到 x: 1450; y: 1350;

位置:绝对 -顶部和左侧对齐 0;0 最接近的 p:r 或 p:a 父元素,与自然流无关-例如(在伪HTML/CSS中):

<div style="relative/absolute">
  <img absolute="top:-20px; left: 150px;">
</div>

图像将高出20px,从父分区的左上角向右150px。

也就是说,您希望容器是相对的和绝对的,并且两个堆叠的图像都应该是 位置:相对 具有 top: 0; left: 0; . 别忘了设置 z-index ,如果您想更好地控制分层。

-A