0

次のコードを使用して、x1600幅の背景画像をさまざまな画面解像度で配置できます:)小さい解像度に集中化されているため、完全に機能します。

body {
    padding: 0;
    margin: 0;
        background: #f8f7e5 url(images/header-top.jpg) no-repeat center top;    
    color: #333333;
}
#content {

    width: 860px;
    margin: 238px auto 0;
    background: #fff;
    border: solid 1px #ccc;
    padding: 20px;
}
<body>

<div id="content">
    <p>details</p>
</div>

ただし、その大きな背景画像では、メニューにカーソルを合わせたときにメニューの色を変更する効果を追加する必要があります。それで、私はその背景画像を3行（ヘッダー、メニュー、下）にトリミングします。メニューセクションの下で、私は各メニューを垂直にトリミングし、異なる色でメニューを複製しました。次に、トリミングされたすべての画像を組み合わせて背景画像に戻します。

メニューのホバー効果は完全に機能しますが、背景画像が小さい解像度で中央に配置されなくなりました。代わりに右に揃えました:(

以前は、CSSのBODYに背景画像を入れれば問題なく動作します。しかし、写真がトリミングされた後、私はそれらをBODYに入れることができなくなりました。

これは私のコードです

<div class="menu_image"><img src="images/backgrounds/header-background1.jpg" border="0" /></div>     
    <div style="line-height: 0px; width:1600px">
          <div class="menu_image"><img src="images/backgrounds/header-menu1.jpg" /></div>
          <a class="menuhover" href="index.php"/>
          <a class="menuhover2" target="blank" href="http"></a>
          <a class="menuhover3" href="about-us.php"></a>
          <a class="menuhover4" href="portfolio.php"></a>
          <a class="menuhover5" href="contact-us.php"></a>
          <div class="menu_image"><img src="images/backgrounds/header-menu7.jpg" /></div>
    </div>    
     <div class="menu_image"><img src="images/backgrounds/header-background3.jpg" /></div>

上記の背景画像を任意の画面解像度で中央に揃えるにはどうすればよいですか？ありがとう。

4

1 に答える 1

0

ページとメニューのソリッド背景 (BG) 画像を作成できないのはなぜですか? メニュー ブロックに追加の背景画像を使用すると、大きなソリッド画像の上に表示され、ホバー効果が表示されます。

追加した：

メニューBG変更はホバーBG画像のみ使用可能です。そのため、メイン BG からメニュー ゾーンの背景を除外する必要はありません。

OnMouseOver- メニュー ゾーンのデフォルト bg を上書きする、メニューの BG をロードします。

OnMouseOut-noneメニューの背景用なので、デフォルトのページ BG が表示されます。

于 2012-06-02T05:14:08.013 に答える