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％離して配置する代わりに、元の背景[色]の別の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縦に繰り返すと、background-positionでできた余白が見えなくなります。

コメントするために編集：両方向で繰り返す必要がある場合、私が考えることができるのは3層構造です。position:relativeを持っている3つのdivを入れることができるコンテナdivが必要になりますposition:absolute。下の写真には背景画像が繰り返され、真ん中の写真は白で下の写真の上部のみを覆い、上の写真には実際のコンテンツが含まれます。

于 2012-04-19T21:05:55.210 に答える