Question

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

但模式没有重叠。我该怎么做才能解决这个问题？请帮忙。

Answer 1

更改：

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/

Answer 2

Height: 100%就像0px，如果你没有在div中填充某些内容...所以我建议你给出一个固定的高度，1px也足以看到点。

Answer 3

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

http://jsfiddle.net/XNeDK/

使用CSS中的模式叠加背景

3 个答案: