Question

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

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

Answer 1

使用wrap在图像顶部添加另一个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);
});

Answer 2

将第一张图片保留为div的背景：

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

这将使第二个图像居中（仅水平但是）。您可能需要使用margin和top属性（如果您使用absolute或relative定位）稍微改变一下。但是如果它只是另一张图像中的一张图像，那么你可以用margin-top来调整一下它应该这样做。

Answer 3

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

放置图像必须是目标元素的后代元素... 试试并回复。

Answer 4

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

如何在图像上放置图像？

4 个答案: