固定在絕對定位的div內的背景

我正試圖在我的網站封裝的兩側實現兩個固定的橫幅。我已經使用絕對定位來將橫幅div附加到包裝的每一面，並在每個橫幅中設置了固定的背景，以便橫幅跟隨頁面中的用戶。固定在絕對定位的div內的背景

我似乎有問題設置橫幅的背景位置，背景位置似乎不相對於父div。我希望橫幅背景在divs中居中。

碼，例如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>

來源

2014-08-31 JamesHusband

_「背景位置似乎不是相對於父div「_ - 當然不是，因爲您正在使用'background-attachment：fixed'，這使得視口成爲參考點。 – CBroe 2014-08-31 00:27:09

我雖然固定的附件是相對的？是否有另一種選擇來實現這種效果？ – JamesHusband 2014-08-31 00:28:20

改變你的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的空白空間）到right:0

來源

2014-08-31 02:18:03 Devin

固定在絕對定位的div內的背景

回答

相關問題