html - "push up"内容上方的背景具有动态高度

Question

我有一个带有背景图片的 div。在该 div 内部是一个绝对定位的 div，其中包含文本。在宽度>650 时，文本是一个 float 在 div 内部的矩形。 widths<=650 时，文本锚定到 div 的底部，宽度为 100%。

发生这种情况时，它位于背景图像底部的顶部。我希望背景图像“向上推”，以便您可以看到背景图像的底部。我可以给背景位置一个负偏移量，但是内容的高度是动态的，因为文本换行以适应视口(viewport)的宽度，所以我不知道高度，所以指定一个特定的偏移量/边距不是一个选项。

有什么方法可以用我现有的设计在纯 CSS 中完成此操作吗？我想避免使用 javascript，并避免重新设计 HTML 的布局(例如，使用 <img> 而不是 background-image )。

下面是图片描述，下面是代码:

我有:

我想要的:

 #container{
                background-image:url("http://i.imgur.com/u4xZlez.png");
                background-size:100%;
                height:400px;
                display:block;
                position:relative;
                width:100%;
                max-width:650px;
                border:1px solid red;
                background-repeat:no-repeat;
            }
            #content{
                position:absolute;
                top:10%;
                display:block;
                background-color:white;
                width:60%;
                margin-left:10%;
                border:1px solid black;
            }

            @media(max-width:650px){
                #content{
                    bottom:0px;
                    top:auto;
                    width:100%;
                    margin-left:0px;
                }
            }

<div id="container">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
            </div>
        </div>

Answer 1

在媒体查询中，将容器显示更改为 flex 。

使用 justify content 将 content 移到底部。

添加一个伪元素，使用 order 将其移动到开头，在 content 之前。

将容器的背景图片改为这个伪图片，并对齐到底部

#container{
                background-image:url("http://i.imgur.com/u4xZlez.png");
                background-size:100%;
                height:400px;
                display:block;
                position:relative;
                width:100%;
                max-width:650px;
                border:1px solid red;
                background-repeat:no-repeat;
            }
            #content{
                position:absolute;
                top:10%;
                display:block;
                background-color:white;
                width:60%;
                margin-left:10%;
                border:1px solid black;
            }

   @media(max-width: 650px) {

    #container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-size: 0%;
    }

    #container::before {
        content: "";
/*        background-image: url("http://i.imgur.com/u4xZlez.png"); */
        background-image: inherit;
        background-size: 100%;
        background-position: center bottom;
        width: 100%;
        flex-grow: 1;
        order: 1;
    }

    #content {
        position: static;
        bottom: 10px;
        top: auto;
        width: 100%;
        margin-left: 0px;
        order: 2;
    }
}

<div id="container">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
            </div>
        </div>