0

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

这是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)}
4

3 回答 3

1

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

#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是从上边界的偏移量。

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

于 2012-10-10T07:24:26.750 回答
0

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

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

于 2012-10-10T09:00:18.557 回答
0

您需要使用该z-index属性

这

#header
{
   z-index : 100 ;
}

#header img
{
   z-index : 101 ;
}

里面的图像z-index应该大于标题z-index..

于 2012-10-10T06:47:46.837 回答