如何在图像上放置图像？

问题描述：

假设我有一个div和div有img标签，如 <div><img src='img1.png'/></div>所以当页面运行时，img1.png会在div中加载。我只需要知道如何在中心放置另一个小图像，就像img1.png上的任何繁忙图像一样。用jQuery或css做什么是最好的方法。给我css或jquery在中心放置小图像div。如何在图像上放置图像？

我还有一个问题，如果div有背景图像设置与CSS然后我可以确定背景图像下载完成或不使用jQuery？如果可能的话请给我看一个示例代码。感谢

你有没有我们可以看的代码？ – SpaceBeers 2012-02-02 11:14:18

检查用于将元素叠加在另一个之上的CSS z-index属性。 – Srisa 2012-02-02 11:15:14

你已经试过了什么？这不是你来让其他人为你写代码的地方......你甚至可以用你的问题Google搜索吗？ – Jon 2012-02-02 11:18:48

答

使用包装上添加图像的顶部的另一个DIV ...

$("#divID img").each(function() { 
    var $overlay = $('<div></div>'); 
    $overlay.css({ 
     position: "relative", 
     display: "inline-block", 
     width: $(this).width(), 
     height: $(this).height(), 
     backgroundPosition: "center center", 
     backgroundImage: "url(loading-image.gif)" 
    }); 
    $(this).wrap($overlay); 
});

如何将另一个div不仅放在图像的顶部，而是需要将div放置在图像的中心......这将如何实现？ – Thomas 2012-02-02 12:24:57

将叠加图像的宽度和高度设置为图像的宽度和高度，然后使用背景位置将背景图像居中在div上。唯一的问题是这需要图像的宽度和高度才能工作。 – Archer 2012-02-02 12:27:04

答

保持所述第一图像作为背景在div：

<div style="background: url('img1.png')"> 
<img src="img2.png" style="margin 0 auto" /> 
</div>

这将（仅在水平方向，但）居中所述第二图像。您可能需要拨打margin和top属性（如果使用absolute或relative定位）。但是如果在另一幅图像中只有一幅图像，则可以用margin-top稍微摆弄一下，然后就可以做到。

答

$("#imageToPlaceDivID").position({ 
    my: "center center", 
    at: "center center", 
    of: "#IDOfTargetElementWhereYouWantToPlace" 
});

要放置图像必须是目标元素的后代元素... 尝试它，答复。

答

CSS3支持多个背景图层。 http://www.css3.info/preview/multiple-backgrounds/

#example1 { 
    width: 500px; 
    height: 250px; 
    background-image: url(sheep.png), url(betweengrassandsky.png); 
    background-position: center bottom, left top; 
    background-repeat: no-repeat; 
}

如何在图像上放置图像？

相关推荐