1

-1 の z-index を常にバックグラウンドにするフローティング div を作成しようとしましたが、位置を絶対にすると消えてしまいます。また、yリピート画像で真ん中に配置したい。

.perchament{
    position:absolute;
    margin:0 auto;
    height:100%;
    background: url("image_assets/parchment.png") repeat-y;
    margin-top:25px;
    z-index:-1;
}
4

3 に答える 3

1

コンテンツがなく、幅も指定されていないため、表示されなくなります。

これをCSSに追加します。

left: 50%;
width: 100px;
margin-left: -50px;

幅を設定する必要があり、左マージンは常にその半分になります。

デモ

他の人が言っているように、なぜ体の背景画像だけをしないのですか？

body {
    background: url("image_assets/parchment.png") center repeat-y;
}​
于 2012-07-16T15:40:18.543 に答える
0

この特定のケースでは、divに幅を追加する必要があります（絶対に配置されているため）。

backgroundただし、要素などのルールの何が問題になってbodyいますか？

于 2012-07-16T15:40:31.027 に答える
0

マージンなどの代わりに「トップ」などの配置コントロールを使用して、要素を絶対に配置し、幅と高さを設定する必要があります。

    .perchament{
        position:absolute;
    top: 0;
    left: 0;
width: 500px;
        margin:0 auto;
        height:100%;
        background: url("image_assets/parchment.png") repeat-y;
        margin-top:25px;
        z-index:-1;
    }

それは役に立ちますか？

また、マイナスの z-index の使用も避けたいと思います。代わりに、このアイテムを z-index: 1 に設定してから、その上のコンテナー (他のすべてのものを含む) を z-index: 2 に設定することができます。

または、必要な背景画像だけの場合は、それを div の代わりにドキュメントの BODY タグに配置するだけです。BODY または HTML 要素は、常にスタックの一番下にあります。

于 2012-07-16T15:42:23.137 に答える