css - 右侧具有可变高度 div 的全尺寸背景图像

Question

我根据在互联网上找到的示例编写了以下居中背景图像的代码。现在我需要在右边添加一个300px宽的框，根据top和right进行一定的对齐，但是我的代码不起作用。

    <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>

Answer 1

您必须移动#box外部#bg（例如，使它们成为兄弟姐妹）。

其他选项是将您定义#bg为：

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

然后#box就会出现。问题是它#bg不会表现为“全局”背景，因为如果前者溢出视口，那么后者将不会调整大小以容纳它。