集中背景图像答案

【问题标题】：Centralize background images集中背景图像
【发布时间】：2012-06-03 01:44:09
【问题描述】：

我可以使用以下代码以不同的屏幕分辨率放置 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>

如何在任何屏幕分辨率下将上面的背景图像居中对齐？谢谢。

【问题讨论】：

标签： css

【解决方案1】：

为什么您不能为页面和菜单创建纯色背景（BG）图像，为菜单块使用额外的背景图像，它将显示在大纯色图像顶部并显示您的悬停效果？

添加：

您只能使用悬停背景图像来更改菜单背景。所以你不需要从主BG中排除菜单区域的背景。

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

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

【讨论】：

这听起来是个好主意！你能告诉我如何在每个按钮上应用鼠标悬停效果吗？所以我将首先创建一个没有菜单的背景。并使用
和 position: absolute 在该背景图像的顶部手动添加菜单。我可以使用我粘贴在上面的代码吗？如果我错了，请纠正。
感谢您的回复。但怎么会这样呢？您是否使用坐标来识别菜单位置？地图可以有鼠标悬停效果吗？