0

我正在制作一个网站，通过单击下一步按钮，浏览器从服务器请求一个新的图像 URL 并使用 jQuery 加载图像。当请求发生时，我想在旧图像之上显示加载图像（如 Facebook）。

HTML

<div1>
    <img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"></img>
    <div2>
        <img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
    </div2>
</div1>

CSS

div1
{
    position:relative;
}

div2
{
    position:absolute;
    top:50%;
    left:50%;
}

当我在 jsFiddle 中尝试此操作时，图像不会出现在其他图像上。我只知道基本的 CSS。原谅上面代码中的任何错误。

4

4 回答 4

3

定义 DIV 的宽度和高度。像这样写：

.div2
{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-25px;
  margin-top:-20px;
  width:50px;
  height:40px;
}

例如检查这个http://jsfiddle.net/JYduU/

于 2013-01-26T17:36:45.323 回答
0

标记不正确

    <div1><img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"/>
    <div2><img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"/>
    </div2></div1>

应该像

   <div id="div1"><img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500"/>
   <div id="div2"><img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50"/>
   </div></div>

你的 CSS

  <style type="text/css">
   #div1 { position:relative; }
   #div2 { position:absolute; top:50%; left:50%; }
 /* some answers here have some tips on better positioning center */

 </style>
于 2013-01-26T17:42:56.983 回答
0

div1将您的html 更改div2为

<div class=div1><img id="rel" src="http://localhost/images/original.jpg" height="400" width="500">      </img>
<div class=div2><img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
</div2></div1>

.div1
{
  position:relative;
 }
.div2
{
  position:absolute;
  top:50%;
  left:50%;
}

如果您使用 id 作为图像标签，请不要同时提供相同的 id

于 2013-01-26T17:37:55.297 回答
0 
<div id="parentDiv">
   <img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500" />
   <img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50" />
</div>

CSS：

#parentDiv
{
   position:relative;
}

#rel2
{
   position:absolute;
   top:50%;
   left:50%;
}

您的代码有一些错误：

<img></img> should be <img />

你不应该有两个相同的IDrel

您必须将两个图像放在同一个Parent Div中，给它一个position:relative;，以便第二个图像被认为是这个 Parent Div 的绝对值，而不是整个页面。

检查这个http://jsfiddle.net/Kfxha/

要将第二张图像定位在中心，您必须进行一些数学计算。

top = ( rel1.height - rel2.height ) / 2 =  ( 400 - 40 ) / 2 = 180px
left = ( rel1.width - rel2.width ) / 2 = ( 500 - 50 ) / 2 = 225px
于 2013-01-26T17:38:26.523 回答