如何垂直和水平重复图像？

注意：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

如何垂直和水平重复图像？

回答

相关问题