1

我需要一个带有页面内容的居中 div，以及在页面左右两侧分别对齐的重复背景：现在的样子。在左侧，箭头图案应从页面左侧结束的位置开始，并重复到屏幕左侧的末尾，右侧也是如此。在右侧，它正确对齐，但这是巧合。当前代码在：this fiddle

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

这样做基本上是将背景分成两部分 - 左和右，当左背景与左对齐而右背景与右对齐时，每个部分都有自己的背景。

于 2013-07-27T09:20:44.377 回答