如何垂直和水平重複圖像？

注意：repeat，repeat-x，repeat -y所有這些都不起作用。如何垂直和水平重複圖像？

所以，我有以下HTML代碼的&。我嘗試了很多方法，但無法工作。我想重複的圖像是XYZ.png。

<html> 
<head> 
<title>IOP</title> 
<style> 
body > header { 
    background : url("a.png") repeat-x scroll 0 0 transparent; 
    box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2); 
    width : 100% 
    position : relative; 
    z-index : 10; 
    height: 57px; } 
#MAN { 
    height:100%; 
    padding : 30px 0 25px; 
    background: url("XYZ.png") repeat ; 
    } 

</style> 
</head> 
<body> 
<header></header> 
<div id="man"> 
</div> 
</body> 
</html>

我甚至嘗試過身高：100％，但這給了我一個滾動條。

問候，
網友

來源

2011-12-31 Netizen110

好吧！我其實不關心這些東西！ – Netizen110 2011-12-31 18:04:18

我不能重新創建你的問題，是什麼問題......你使用的代碼應該工作，即使在一個最老的瀏覽器有... – Starx 2011-12-31 18:11:53

我正在FF10中運行此功能，但仍然無效。 – Netizen110 2011-12-31 18:15:47

試試這個：以像素爲單位

<html> 
<head> 
<title>IOP</title> 
<style> 
body > header { 
    background : url("a.png") repeat-x scroll 0 0 transparent; 
    box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2); 
    width : 100% 
    position : relative; 
    z-index : 10; 
    height: 57px; } 
#MAN { 
    height:500px; 
    width: 500px; 
    padding : 30px 0 25px; 
    background: url("XYZ.png") repeat ; 
    } 

</style> 
</head> 
<body> 
<header></header> 
<div id="man"> 
</div> 
</body> 
</html>

添加寬度和高度#MAN。 Usualy的高度和寬度100％將佔據其parrent的大小。嘗試使用具有寬度爲960px的包裝div，然後在包裝中包含寬度爲100％的每個元素都將佔用960px的寬度。這是從我腦海中沒有經過測試的馬力。希望它可以。我沒有寫幾個月的任何html的CSS現在:(

來源

2011-12-31 18:06:38 Limeni

實際上，我需要將其作爲移動Web應用程序的支柱，這就是爲什麼我希望重複此操作的原因。但是這仍然是靜態的。 nvm比以前的結果還要好。謝謝！ – Netizen110 2011-12-31 18:14:48

實際上我沒有得到一個滾動條。反正沒有滾動條呢？ – Netizen110 2011-12-31 18:37:28

已歷經嘗試，如果它是區分大小寫？

<html> 
<head> 
<title>IOP</title> 
<style type="text/css"> 
body > header { 
    background : url("a.png") repeat-x scroll 0 0 transparent; 
    box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2); 
    width : 100% 
    position : relative; 
    z-index : 10; 
    height: 57px; 
} 
/* case sensitive? ----> */ #man { 
    height:100%; 
    padding : 30px 0 25px; 
    background: url("XYZ.png") repeat ; 
    } 

</style> 
</head> 
<body> 
<header></header> 
<div id="man"> 
</div> 
</body> 
</html>

來源

2011-12-31 18:00:55

-1，無關緊要：http://www.w3.org/TR/selectors/#casesens – Wex 2011-12-31 18:02:54

哦，不知道這個，謝謝... – 2011-12-31 18:10:09

爲什麼不只是做：

body { background: url(XYZ.png); }

參見：http://jsfiddle.net/Wexcode/Chb33/

編輯：您也可能無法正確引用您的圖像。看到我下面的評論。

來源

2011-12-31 18:05:49 Wex

可悲的是我沒有工作:-( – Netizen110 2011-12-31 18:10:51

它可能是你沒有正確引用圖像。如果你的CSS在'www.yourdomain.com/ css/style.css'，你的圖片在'www.yourdomain.com/images/XYZ.png'中，你需要在你的CSS中引用它爲'../ images/XYZ.png'。 – Wex 2011-12-31 18:17:09

另外，make確保你的CSS中的文件名與w相匹配ith文件名;而CSS類不區分大小寫，我不認爲文件名是。 – Wex 2011-12-31 18:17:22

如何垂直和水平重複圖像？

回答

相關問題