将背景图片置于前景，可行吗？

Question

我真的需要将背景图片放在另一张图片前面，但是我找不到不使用绝对定位的方法来实现它。

<div><?php get_avatar($x, 56); ?></div>

get_avatar显示一张图片。 因此，HTML代码如下：

<div><img src="whatever"></div>

需要帮忙吗？

- sticksu

---

没有足够的信息，任何人都无法给出有用的答案。PHP代码对我们回答问题毫无帮助。请展示完成的HTML代码，或者至少让我们了解get_avatar()函数的输出长什么样子。 - Spudley

你想让CSS的background-image显示在<img>标签中的whatever图像前面，是吗？那么背景图片在哪里呢？是在<div>还是<img>标签上？你仍然没有展示足够的细节给我们。 - Spudley

背景图像在<div>上。我不知道我可以将背景图像放在<img>上。 - sticksu

你可以在<img>上放置背景图像，但是除非前景图像具有透明部分，否则这将是相当无意义的。 - Spudley

Answer 1

你可以使用CSS的multiple background属性

查看这个http://www.css3.info/preview/multiple-backgrounds/

或者

编辑：

你可以像这样将另一张图片的z-index设为负数：

    div{
    background:yellow;
    position:relative;
}
img{
    position:relative;
    z-index:-1
}

<div>
 <img alt="" src="http://dummyimage.com/200x200/000/45454&text=images">
</div>

请查看示例http://jsfiddle.net/sandeep/5vpG7/

- sandeep

---

我忘了提到，不幸的是我需要让它在IE上工作，所以我不能使用CSS3。无论如何，谢谢。 - sticksu

z-index？真的吗？为什么不直接设置为 visibility:hidden; 呢？ - Spudley

@spudley；假设背景图片是透明的。 - sandeep

好的，他没有具体说明（但是，有很多相关信息他没有在没有得到很多提示的情况下具体说明）。 - Spudley

是的 :) 这就是为什么我正在查看他的问题 - sandeep

Answer 2

你的代码（为了清晰起见添加了背景图像样式）：

<div style='background-image:url(something.jpg);'><img src="whatever.jpg"></div>

为了使背景图像显示而不是前景图像，最简单的解决方案是将<img>设置为不可见。

使用CSS有两种方法：

1. 将其设置为visibility:hidden;
2. 将其设置为opacity:1;

第一种解决方案是最好的，因为它适用于所有浏览器。

通过Javascript更改不透明度会使您能够进行淡入淡出效果，但如果这样做，预计在IE中会出现问题。

希望这可以帮助到您。

- Spudley

Answer 3

您可以使用CSS的z-index属性。

设置z-index:999;

- samir chauhan