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中排除菜单区域的背景。

OnMouseOver- 加载菜单背景，覆盖菜单区域的默认背景。

OnMouseOut-none用于菜单背景，因此您可以看到默认页面 BG。

于 2012-06-02T05:14:08.013 回答