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-index会使事情变得更复杂。相反，您可以使用偏移参数来更改背景图像的位置。

#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属性更改为 - ＆gt;

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

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

3 个答案: