Question

如何在顶部添加带有填充/空格的重复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;
}

Answer 1

CSS允许作弊。而不是将背景100％远离顶部覆盖它与另一个具有原始背景[颜色]的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;
}

查看live example。

Answer 2

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

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

重复的css背景与顶部填充

2 个答案: