Question

我正在创建一个网站，通过单击 next 按钮，浏览器从服务器请求新的图像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。请原谅上述代码中的任何错误。

Answer 1

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

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

例如，请检查此http://jsfiddle.net/JYduU/

Answer 2

将您的html div1，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 for image标签，请不要同时使用相同的ID

Answer 3

<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 />

您不应该有两个相同的ID rel

您必须将两张图片放在相同的 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

Answer 4

标记不正确

    <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>

显示在图像上加载gif

4 个答案: