1

インターネットで見つけた例に基づいて、中央の背景画像の次のコードを作成しました。ここで、右側に幅 300 ピクセルのボックスを追加し、上下に基づいて特定の位置合わせを行う必要がありますが、コードが機能しません。

    <style type="text/css">

        #bg {
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
        }

        #bg img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            min-width: 50%;
            min-height: 50%;
        }

        #box 
        {
            position: absolute;
            width: 300px;
            top: 200px;
            right: 100px;             
            background-color: White;
        }

    </style>

    <div id="bg">
        <img src="bg.jpg" alt="">
        <div id="box">
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
            <p>some</p>
        </div>
    </div>
4

1 に答える 1

2

#box外側を移動する必要があります#bg(たとえば、兄弟にするなど)。

他のオプションは、あなたを次のように定義する#bgことです：

    #bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

そして#box登場します。問題は、前者がビューポートをオーバーフローした場合、後者がそれを保持するためにサイズ変更されないため、「グローバル#bg」背景として動作しないことです。

于 2012-05-04T06:00:36.193 に答える