0

如何添加重复的 css 背景，顶部有填充/空格。

这是我的 HTML 结构。

<div class="flare">
    <div class="clouds">
    <div class="clouds_bottom">

        <div class="header">
            contents
        </div>

        <div class="content_body_wrapper">
            contents
        </div>

        <div class="footer">
            contents
        </div>

    </div>
    </div>
</div>

和我的 CSS 代码不起作用。

.clouds_bottom {
    background: url('../img/clouds_bottom_bg.png') repeat left 250px;
}
4

2 回答 2

1

CSS允许作弊。而不是将您的背景放置在距离顶部 100% 的地方，用另一个具有原始背景 [color] 的 div 覆盖它。

html:

<html>
<body>
    <div id="cheated_background">
    </div>
    <div id="body">
        content
    </div>
</body>
<html>​

CSS：

body {
    background: lightblue; /* your clouds :) */
}
#cheated_background {
    position: absolute;
    top: 0px;
    background: white;
    width: 100%;
    height: 100px;
}
#body {
    position: relative;
}

查看实时示例。

于 2012-04-19T22:19:06.967 回答
0

尝试使用repeat-x而不是repeat？如果垂直重复，您将无法看到由背景位置创建的边距。

编辑评论：如果您需要双向重复，我能想到的是三层结构。您需要一个容器 div position:relative，您可以在其中放入三个具有position:absolute. 底部的将有重复的背景图片，中间的将是白色的，仅覆盖底部的顶部，顶部的将包含您的实际内容。

于 2012-04-19T21:05:55.210 回答