将背景图像带到前台。可能还是不可能？

Question

我确实需要将背景图片放在另一张图片前面，但如果不使用绝对定位，我找不到方法来做到这一点。

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

get_avatar 显示图像。 所以 HTML 看起来像：

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

对任何人有一点帮助吗？

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/

Answer 2

您可以使用 css z-index 属性。

设置 z 索引：999；

Answer 3

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

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

为了使背景图像显示而不是前景图像，最简单的解决方案就是使 不可见。

使用 CSS 执行此操作的两种方法：

1. 将其设置为 visibility:hidden;

2. 将其设置为 < code>opacity:1;

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

通过 Javascript 更改不透明度的好处是可以实现淡入淡出效果，但如果这样做，预计 IE 会出现问题。

希望有帮助。