提升背景圖像的內容

好的，所以我想要發生的是我已經設置爲背景圖片以顯示在頁面上的所有其他元素的頂部 - 設置在右側，內容塊的一半，一半在一旁......目前我有結構：提升背景圖像的內容

<div id="SideImage"> 
    <div id="Contain"> 
    <div id="Dash"></div> 
    <div id="content"> 
    <h1>Heading 1</h1> 
    <p>Content</p> 
    </div> 
    <div id="Footer"> 
    <p>Footer Content</p> 
    </div> 
    </div> 
    </div>

CSS如下所示，z-index的不工作時，我使用Firebug，如果我從含去除背景顏色CSS我可以看到完整的圖像，但我想要包含背景，短跑背景和頁腳的SideImage。我唯一能想到的其他事情是在SideImage Div上面設置一個Div，它的白色背景色只是一個特定的寬度，並從Contain Div中移除背景色。有任何想法嗎？

#Contain { 
background-color: #FFFFFF; 
margin: 0 auto; 
position: relative; 
text-align: left; 
width: 850px; 
z-index: 1;} 

#Dash { 
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png"); 
float: none !important; 
height: 10px; 
position: absolute; 
top: 169px; 
width: 850px; 
z-index: 2;} 

#content { 
border-left: 2px solid #C5DFF3; 
border-right: 2px solid #C5DFF3; 
float: left; 
position: relative; 
width: 846px; 
z-index: 3;} 
#Footer { 
background-color: #C5DFF3; 
clear: both; 
height: 60px; 
padding-top: 5px; 
position: relative; 
width: 850px; 
z-index: 4;} 

#SideImage { 
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png"); 
background-position: 85% top; 
background-repeat: repeat-y; 
position: relative; 
z-index: 5;}

JSFiddle of code above

來源

2012-12-28 Nelliemade

-1

你實現你想要的背景圖片，這應該是在BACK是在前面的，對不對？在CSS中無法正常執行此操作。你需要有一個<img>元素與你想要的圖像，並使它固定/絕對定位與高Z指數。

來源

2012-12-28 19:12:55

堆棧將在所有的頁面上的其他人的前面顯示的頂部的DIV的「背景」的形象結束了CSS。 – jmeas

@jmeas：是的，但那*仍然*需要額外的標記。元素背景不可能超過包含**的元素。這是我的觀點。 –

我已經考慮過做圖片的事情，但它不會自動重複頁面的長度，然後運行其他元素。 – Nelliemade

Z-index可以是善變的情婦。我通常會訴諸內容渲染順序來做這樣的事情。基於上述標記以及您的想法，我傾向於同意不可能將包含的背景放在其任何內容的「頂部」。請參閱該Smashing鏈接中的圖表以獲取更多信息。

如果添加的元素<div id="SideFill" class="ir"></div>，你可以進行更改，以你的CSS：

 
#SideImage { 
    width:100%; 
    position:relative; 
} 
#SideFill { 
    position:absolute; 
    width:15%; 
    height:100%; 
    top:0; 
    right:0; 
    background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0; 
}

來源

2012-12-28 19:28:29 oomlaut

什麼是粉碎鏈接？ – Nelliemade

好了，這就是我終於結束了網頁上的HTML。

<div id="Contain"> 
    <div id="SideImage" class="ir">&nbsp;</div> 
</div>

因爲我在

#SideImage { 
    background: url("/myLink/SideImage.png") repeat-y scroll 0 0 transparent; 
    height: 100%; 
    left: 748px; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 30; 
}

來源

2013-01-07 19:42:07 Nelliemade

提升背景圖像的內容

回答

相關問題