Question

我有一个带背景图片的div。在div里面是一个绝对定位的div，里面有文字。在宽度> 650时，文本是浮动在div内部的矩形。在宽度<= 650时，文本被锚定到具有100％宽度的div的底部。

发生这种情况时，它位于背景图像底部的顶部。我希望背景图像能够得到提升＆＃34;这样你就可以看到背景图像的底部。我可以给背景位置提供负偏移，但是内容的高度是动态的，因为文本换行以适应视口的宽度，所以我不知道高度，所以指定特定的偏移/保证金不是一个选项 。

有没有办法用我的设计在纯CSS中完成这个？我想避免使用javascript ，并避免重新设计HTML的布局（例如，使用 <img> 而不是< / em> background-image）。

描述以下情况的图片，代码如下：

我拥有的：

我想要的：

＆＃13;
＆＃13;
#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; } }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

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

使用对齐内容将内容移至底部。

添加一个伪，使用命令将其移至开头，在内容之前。

将容器的背景图像设置为此伪替，并将其对齐到底部

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

Answer 2

#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 {
  background-image: none;  
  height: auto;  
}
  #content {
    position: relative;
    width: 100%;
    margin-left: 0px;
  }
   #content:before{
     content: '';
     display: block;
     background-image: url("http://i.imgur.com/u4xZlez.png");
     background-repeat: no-repeat;     
     background-size: 100%;
     padding-bottom: 61.54%; /* 400/650 */
   }
}

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

 #container{
                background-image:url("http://i.imgur.com/u4xZlez.png");
                background-size:100%;
                background-position: 0 -110px;
                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>

尝试使用background-position CSS属性，该属性接受px以及％测量。您需要将其放入媒体查询中，以便它仅适用于屏幕＆gt; 650px，但我会留给你做的。

Answer 4

这是......

但图像不再是背景。

＆＃13;

#container {
  overflow:hidden; /* if desired */
                
  height:400px;
  display:block;
  position:relative;
  width:100%;
  max-width:650px;
  border:1px solid red;
            }
#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;
  }
  /* This... */
  #content img {
    width:100%;
    position:absolute;
    bottom:100%;
  }
}

＆＃13;

<div id="container">
  <div id="content">
    <img src="http://i.imgur.com/u4xZlez.png" />
    <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>

＆＃13;

＆＃34;推高＆＃34;背景上面的内容与动态高度

4 个答案: