我已经使用以下 css 文件覆盖背景 bg.jpg 和 dots.png 的 repeat-x repeat-y 模式.
*{
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>
但是图案没有叠加。我该怎么做才能解决这个问题？请帮忙。
最佳答案
改变:
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/
关于html - 在 CSS 中使用图案覆盖背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11070770/