0

次のcssファイルを使用して、背景bg.jpgを.repeat-x repeat-ydots.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

{ background: repeat; } だけです。-x と -y ではありません。

http://jsfiddle.net/XNeDK/

于 2012-06-17T11:08:54.460 に答える
1

Height: 100%0pxdiv内に何かを記入しない場合のようなものです...したがって、固定の高さを指定することをお勧めします1px。同様に、ドットが表示されるのに十分です。

于 2012-06-17T11:01:45.287 に答える