CSS半/半背景

我搜索了每個地方的答案。我有一個設計，我試圖用div和css編碼。圖像的上半部分有一個從左到右的漸變，顏色是不同的。我發現的問題是，我可以做到一半半，我終於能夠將圖像置於中央，但其一部分隱藏在背景下。CSS半/半背景

（http://pretty-senshi.com/final-final.html）< - 樣本設計迄今

http://pretty-senshi.com/original.png < - 原始設計

http://pretty-senshi.com/gradient.png < - 的背景漸變只需要在X軸上重複。

<html> <LINK href="style.css" type=text/css rel=stylesheet> </head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<div id="container"><div id="rightHalf"> 

    </div><center><img src="images/Final-Final_02.png" id="picture"></center> 
    <div id="header2"> 

    </div> 

    </div> 
    </div></div>

而CSS是：

@charset "UTF-8"; 
/* CSS Document */ 
body {background: url(images/final-final_01.png); 
background-repeat:repeat-x;} 
div#container { 
width:100%;} 
picture {z-index: 999;} 

#rightHalf { 
background: url(images/final-final_03.png); 

background-repeat:repeat-x; 
width: 50%; 
position: absolute; 
right: 0px; 
height: 100%; 
z-index: 1; 
}

來源

2012-11-12 prettysenshi

而不是z-index：1在你的#rightHalf div上嘗試z-index：-1。 –

我簡直不敢相信！是！謝謝！它現在完全有效！ – prettysenshi

有些事情不會幫助您解決問題，但無論如何都需要解決：您應該有一個文檔類型聲明。沒有標籤，但是無論如何你都會關閉它。如果您使用的是外部樣式表，請勿將樣式屬性添加到您的身體標記中。中心標籤現在已經被棄用了很長一段時間，試用margin：0 auto;代替。最後，我會考慮適當地嵌套和縮進HTML標籤，以便它們易於閱讀。做這些事情不僅會讓你的代碼在瀏覽器中更好地發揮作用，而且還會讓你看起來更專業。希望這可以幫助。 :) –

我猜使用的z-index = -1爲#rightHalf將解決這個問題。

來源

2012-11-17 02:57:49 Hessam

回答

相關問題