如何将背景图像放在徽标图像后面

Question

我有一个页眉，左边有一个徽标图像。我试图在标题中放一个背景图像，但bg图像是从徽标图像的右侧开始的。徽标图像是一个透明的PNG图像，所以我猜Bg图像可以放在徽标图像后面。

这是HTML

<div id="header">
<div class="fl" style="width:378px; height:79px; overflow:hidden;">
<p align="left"><a href="http://mysite.com/magento/index.php/"><img  src="mysite.com/magento/skin/frontend/default/my_theme/images/dlogo.png" ></a></p>
</div>
</div>

标题的CSS：

#header{ width:972px; padding:15px 0px 10px 0px; margin:0 auto; text-align:left; height:117px; background:url(../images/dbody_background.jpg)}

Answer 1

在理解代码时，使用z索引会使事情变得更加复杂。相反，您可以使用偏移参数来改变背景图像的位置。

#header{ 
width:972px; 
padding:15px 0px 10px 0px; 
margin:0 auto; 
text-align:left; 
height:117px; 
background:url(../images/dbody_background.jpg) 50px 10px;
}

其中，
50px是距左边界的偏移量
10px偏离顶部边界。

你甚至可以在这里使用负值。试试看。

Answer 2

您需要使用z-index属性

#header
{
z-index : 100 ;
}
#header img
{
z-index : 101 ;
}

z-index内部的图像应大于标头z-index。。

Answer 3

这对我很有效，只需将Background属性更改为这个->

background:url(../images/diwalibody_background.jpg)no-repeat scroll center top transparent;