Question

我可以使用以下代码将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，它的工作正常。但是，在裁剪完照片后，我再也无法将它们放入身体。

这是我的代码

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

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

Answer 1

为什么你不能为页面和菜单创建实体背景（BG）图像使用菜单块的附加背景图像，它将显示在大实心图像上并显示你的悬停效果？

增加：

您只能使用悬停BG图像进行菜单BG更改。因此，您无需从主BG中排除菜单区域的背景。

OnMouseOver - 加载BG菜单，覆盖菜单区域的默认bg。

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

集中背景图像

1 个答案: