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 を使用してヘッダーの後ろに配置し、必要な場所にマージンを設定します。

これを示すコードを次に示します: ( 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>

それはあなたが必要とするものですか？

于 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) background プロパティを使用してグラデーション イメージを本文に追加します。b) background プロパティを使用して、マップ/描画イメージを外部コンテナーに追加します。

    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 に答える