Question

我目前正在开发一个网站，我在标题背景上有问题，所以我正在制作的标题是：

http://i.imgur.com/h1JLm9A.jpg

目前我有这个：

http://i.imgur.com/LgF6HXm.jpg

我正在尝试在标题上放置背景图像，但要正确定位图像，它不能在标题中，因为图像也显示在标题之外。我怎样才能做到这一点？我尝试使用z-index但不起作用。

HTML：

<div id="container">            
<div id="header">  
        <div id="logo">
            <a href="http://localhost/Yazigi/"><img src="http://localhost/Yazigi/wp-content/uploads/2013/01/logo.png" width="155" height="85" alt="Yazigi – Araçatuba"></a>
        </div>        

            <span class="site-description ir">Você cidadão do mundo</span>
            <form method="get" id="searchform" class="search" action="#">
                <input type="text" class="search_input" name="s" id="s" placeholder="Procure aqui">
                <input type="submit" class="search_bt ir" name="submit" id="searchsubmit" value="">
            </form>

            <ul class="menu l_tinynav1">
                <li class="current_page_item"><a href="http://localhost/" title="Início">Início</a></li>
                <li class="page_item page-item-2"><a href="http://localhost/Yazigi/?page_id=2">Página de Exemplo</a></li>
            </ul>
        </div>
</div>

CSS：

#container {
margin: 0 auto;
max-width: 960px;
padding: 0px 25px;
}    
#header {
    height: 232px;
    background: url(images/topbg.jpg);
    margin: 0;
}

Answer 1

为什么不在标题中使用图像而不是使用CSS背景？将它放在带有绝对位置和一些负z-index的标题后面，然后将其边缘放在你想要的位置。

以下是一些代码：（fiddle）

<div id="header">
    <img src="http://jamesmcgillis.com/upload/google_logo_1_small(1).jpg"/>
</div>

<style>
    #header {
        height: 232px;
        border: solid;
        margin-left: 120px;
    }
    img {
        margin-left: -50px;
        z-index:-1;
        position:absolute;
    }
</style>

这就是你需要的吗？

Answer 2

这里有许多不同的方法，但最可能的是跨浏览器兼容：

<强> 1。在html中：创建一个外部div，（当然，宽度为100％）并添加地图/绘图图像背景。

    <div id="outer-container">
       <div id="container">            
          <div id="header">... etc

          </div>
       </div>
    </div> <!-- outer-container-->

<强> 2。在css中： a）使用background属性将渐变图像添加到主体。 b）使用background属性将地图/绘图图像添加到外部容器中。

    body {
        background: (your-gradient-gray-image.jpg) repeat-x;
    }

    #outer-container { 
        background: url(images/topbg.jpg) no-repeat center top;
    }

CSS：标题bg图像位置

2 个答案: