2010-09-22 205 views
0

您好我有一個1px的PNG文件,我想設置爲背景圖片了兩個div它們彼此相鄰horizo​​ntally.The HTML和CSS是爲下: -CSS背景圖像

<div id='one'>hi</div> 
<div id='two'>hello</div> 

的CSS是這樣

div { 
    width: 50%; 
    height: 50% 
} 
#one, #two { 
    background-image: url(/images/image.png); 
    background-repeat: repeat; 
} 

現在的問題是這裏的兩個div時的圖像設置黑色邊框automaticaly出現之間。我不希望兩個div被視爲單獨的blocks.Please幫助。對於css來說全新的並且需要幫助:-)!

+0

我沒有得到邊界,http://jsfiddle.net/Jn8fL/,請確保您沒有在其他地方的DIV上設置邊距/填充。你也可以嘗試邊框:0; – Robert 2010-09-22 16:51:36

+0

這不是一個完整的圖像,而是一個要重複的小圖像。已經在主帖中編輯了css。早點出來了!沒有邊框:0沒有幫助 – rubicondude 2010-09-22 17:31:11

+0

爲什麼你想要重複1x1圖片?只需設置背景顏色,就完成了。 – nico 2010-09-22 17:53:26

回答

1

我敢打賭,你使用的圖像具有alpha透明度(即圖像部分透明),你看到的是兩個div之間的單像素重疊。要麼確保容器的像素寬度是偶數,要麼將div放在另一個容器中,而是使用背景。

+0

謝謝Stan!這很奇妙......我把它們放在一個容器中,並應用背景..實際上有幾個div,它們被困在另一箇中......這再次感謝! – rubicondude 2010-09-22 18:42:49

0

像羅伯特,我也沒有越過邊界,但我確實得到了一些重複。 看看這對你的作品:

#one, #two{ 
    background-image:url(99785.jpg); 
    background-repeat: no-repeat; 
    borders: 0 
    } 
+0

沒關係圖像文件名:) – alien052002 2010-09-22 16:53:27

+0

圖像是小1 px高度,寬度,這是重複的。它在每一個高度爲200px,寬度都在200px的div中重複完美,但在兩個div的邊界留下一條線。我沒有在Chrome中得到這個問題,但在Firefox中。 – rubicondude 2010-09-22 17:29:49

0

問題是由一對相互作用的事情引起的。

首先,確保您使用的是html嚴格的文檔類型。這將有助於緩解div之間瀏覽器之間的很多格式問題。請參閱alistapart以獲取使用的真實文檔類型的描述和列表,並且quirksmode用於詳細比較它們。

其次,您將很可能不得不將div的邊距設置爲0.瀏覽器具有不同的默認設置。嚴格的文檔類型會減輕大部分這種情況,但通常還有其他方面需要克服。

此外,您可能想要抓住firefox的firebug並利用chromes開發工具。螢火蟲實際上會告訴你所有的邊距/填充/其他所有設定。 Chrome工具不會爲您提供詳細的細節信息,但您可以查看計算樣式部分中的邊距/填充/等等。

+0

謝謝克里斯!但它解決了! – rubicondude 2010-09-22 18:46:02