html - 在绝对定位的 div 中固定背景

Question

我试图在我的网站包装器的两侧实现两个固定的横幅。我使用绝对定位将横幅 div 附加到包装的每一侧，并在每个 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;(我也从您的专栏中更改了它，因为它在列)到 right:0