Question

我要做的是让背景图片的高度根据文字的数量而变化。

离。图像高度为100px，该div中的文本为150px。如何根据输入的文本量将图像高度扩展到150px（或更多）？

HTML：

<div class="scroll-bg">
  <img src="img/scroll_top.gif" style="position:absolute" />
      <div class="scroll-bg-img">
        <div class="scroll-content">
        <center><img src="img/recent_news.gif" /></center>
        <div style="width:100%;margin-top:15px">
          <div style="margin-top:10px;color:black">
            <p>TEXT TEXT TEXT TEXT MORE TEXT</p>
          </div>
        </div>
      </div>
   </div>       
</div>

CSS：

.scroll-bg {
    width: 810px;
    float: right;
}

.scroll-content {
    width: 765px;
    margin-left: 15px;
    word-wrap: break-word;
}

.scroll-bg-img {
    background-image: url(img/scroll_bg.gif);
    background-repeat: repeat-y;
    z-index: 1;
    width: 795px; 
    height: 1000px;
    margin-top: 40px; 
    margin-left: 7px;
    padding-top: 15px;
}

Answer 1

您可以在background-size : cover CSS中使用.scroll-bg-img。但是，并非所有浏览器都支持这一点。只需查看它，看看它是什么。

编辑：

.scroll-bg-image {
    background-image : url("img/scroll_bg.gif");
    background-position : center center;
    background-repeat : no-repeat;
    background-size : cover;
}

更新背景属性，看看它是如何做到的。

Answer 2

background-repeat: no-repeat;
background-size: 100% 100%;

将导致背景拉伸以适合容器，但只要您在height上设置了明确的width和.scroll-bg-img，就不会对文本进行调整p>

如果你删除它们，并让它的大小调整到文本的高度，背景图像将拉伸到适合。

图像的高度取决于文本

2 个答案: