1

ページコンテンツを含む中央の div と、ページの左右に別々に配置された繰り返しの背景が必要です: 今の姿. 左側では、矢印パターンはページの左側が終わるところから始まり、画面の左側の終わりまで繰り返され、右側でも同じことが繰り返されます。右側はちゃんと並んでいますが偶然です。現在のコードは次のとおりです:このフィドル

HTML:

<body>
    <div class="container">
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet
            </p>
        </div>
    </div>
</body>

CSS:

* {
   min-height: 100%;
   margin: 0;
   padding: 0;
}
body {
   background-image: url('http://i.imgur.com/mcX3gBy.png');
   background-attachment: fixed;
}
.container {
   min-height: 100%;
}
.content {
   margin: 0 auto;
   width: 150px;
   background-color: #fff;
   min-height:100%;
}
4

1 に答える 1

5

まあ、これはできますが、それほどきれいではありません. 背景の 2 つの部分を作成するには、構造を変更する必要があります (この場合、css3 の複数の背景でも役に立ちません)。

ここで動作するjsFiddle

.container次の内容を追加しました。

<div class="leftBG"></div>
<div class="rightBG"></div>

そしてCSSを追加しました：

.leftBG{
    position:absolute;
    top:0px;
    left:0px;
    width:50%;
    height:100%;
    z-index:1;
    background:url('http://i.imgur.com/mcX3gBy.png') top right repeat;
}

.rightBG{
    position:absolute;
    top:0px;
    left:auto;
    right:0px;
    width:50%;
    height:100%;
    z-index:1;
    background:url('http://i.imgur.com/mcX3gBy.png') top left repeat;
}

これが行うことは、基本的に背景を 2 つの部分 (左と右) に分割することです。左の背景が左に配置され、右の背景が右に配置されると、それぞれに独自の背景があります。

于 2013-07-27T09:20:44.377 に答える