Question

我根据我在互联网上找到的一个例子编写了以下中心背景图像代码。现在我需要在右侧添加一个300px宽度的框，基于顶部和右边有一定的对齐，但我的代码不起作用。

    <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不会表现为“全局”背景，因为如果前者溢出视口，那么后者将不会调整大小以保持它。

带有可变高度div的全尺寸背景图像

1 个答案: