我使用以下css文件覆盖bg.jpg repeat-x repeat-y模式为dots.png的背景*{
margin: 0;
padding: 0;
}
body {
margin: 0px;
padding: 0px;
color: #666;
font-family: comfortaa;
font-size: 13px;
line-height:1.5em;
background-color: #fff;
width: 100%;
height: 100%;
background: url(../images/bg.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
width: 100%;
height: 17%;
background: url(../images/header.png) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
#dots{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/dots.png) repeat-x repeat-y top left;
opacity:0.6;
}
。
<html>
<head>
<title>My test page</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
<div id="header"></div>
Under Construction
<div id="dots"></div>
</body>
</html>
然后我写了这样的index.php：
{{1}}
但模式没有重叠。我该怎么做才能解决这个问题？请帮忙。
答案 0 :(得分：2)
更改：
background:transparent url(../images/dots.png) repeat-x repeat-y top left;
为：
background:transparent url(../images/dots.png) top left;
默认行为是重复x和y;给它两个参数实际上是不正确的。
这是一个可以看到它的JSFiddle：http://jsfiddle.net/XsDjy/
答案 1 :(得分：1)
Height: 100%就像0px，如果你没有在div中填充某些内容...所以我建议你给出一个固定的高度，1px也足以看到点。
答案 2 :(得分：1)
它只是{背景：重复; }，而不是-x和-y。