css - 如何将背景图片放在 Logo 图片后面？

Question

我的标题左侧有一个 Logo 图像。我试图在标题中放置一个背景图像，但背景图像是从 Logo 图像的右侧开始的。 Logo 图像是透明的 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)}

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 从顶部边界偏移。

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