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/

或

编辑：

你可以用负像给出你的另一张pic 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-index：999;

Answer 3

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

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

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

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

将其设为visibility:hidden;
将其设为opacity:1;

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

通过Javascript更改不透明度可以让您执行淡入淡出效果，但如果您这样做，则会遇到IE问题。

希望有所帮助。

将背景图像带到前景。可能与否？

3 个答案: