Question

我正在尝试在我的网站包装器的两侧实现两个固定横幅。我已经使用绝对定位将横幅div附加到包装器的每一侧，并在每个横幅内设置固定的背景，以便横幅跟随用户进入页面。

我似乎在设置横幅的背景位置时遇到问题，背景位置似乎与父div无关。我希望横幅背景能够在div中居中。

代码和示例site

<style>
.page-container {
    position: relative;
    background: #FFF;
    width: 970px;
    margin-left:auto;
    margin-right: auto;
    background-color:#F00;
}

#left-bg {
    width: 306px;
    height: 100%;
    position:absolute;
    top: 0px;
    left: -306px;
    background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif);
    background-position: center center;
    background-attachment: fixed;
}

#right-bg {
    width: 306px;
    height: 100%;
    position:absolute;
    top: 0px;
    right: -306px;
    background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif);
    background-position: top center;
    background-attachment: fixed;
    background-position: center right;
}
</style>

<div class="page-container">  
  <div id="left-bg"></div>
  <div id="right-bg"></div>
</div>

Answer 1

像这样更改你的CSS：

.page-container {
    position: relative;
    background: #FFF;
    width: 970px;
    margin-left:auto;
    margin-right: auto;
    background-color:#F00;

    }

#left-bg {
    width: 306px;
    height: 100%;
    position:absolute;
    top: 0px;
    left: -306px;
    background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif) no-repeat 100% 0;
}

#right-bg {
    width: 306px;
    height: 100%;
    position:absolute;
    top: 0px;
    right: -305px;
    background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif) no-repeat 100% 0;
}

此外，除非您是按设计进行的，否则您应该考虑更改right: -305px;（我也从列中更改，因为它在列的左侧添加了1px空格）到{{1} }

固定绝对定位div中的背景

1 个答案: