0

我已使用以下 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;
}

然后我像这样编写了 index.php：

<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>

但模式没有重叠。我能做些什么来解决这个问题？请帮忙。

4

3 回答 3

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/

于 2012-06-17T11:10:43.843 回答
1

Height: 100%就像0px你没有在 div 里面填充一些东西......所以我建议你给一个固定的高度，1px也足以看到这些点。

于 2012-06-17T11:01:45.287 回答
1

这只是{背景：重复；}，而不是 -x 和 -y。

http://jsfiddle.net/XNeDK/

于 2012-06-17T11:08:54.460 回答