0

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

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;
}
4

2 回答 2

0

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

这是一些显示此内容的代码：（小提琴）

<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>

那是你需要的吗？

于 2013-01-27T23:44:37.357 回答
0

您在这里有许多不同的方法，但可能最适合跨浏览器的方法是：

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

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

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

2. 在 css 中： a) 将渐变图像添加到具有背景属性的主体中。b) 将地图/绘图图像添加到具有背景属性的外部容器中。

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

    #outer-container { 
        background: url(images/topbg.jpg) no-repeat center top;
    }
于 2013-01-27T23:51:37.077 回答