1

我正在尝试做的是根据文本量使背景图像的高度发生变化。

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

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;
}
4

2 回答 2

1

你可以background-size : cover在你的.scroll-bg-imgCSS 中使用。但是，并非所有浏览器都支持这一点。只需查看它，看看它的全部内容。

编辑：

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

像这样更新背景属性，看看它对你有什么影响。

于 2013-04-26T21:09:49.950 回答
1 
background-repeat: no-repeat;
background-size: 100% 100%;

将导致背景拉伸以适合容器，但只要您明确height并width设置为文本，它就不会调整大小.scroll-bg-img

如果您删除它们，并将其调整为文本的高度，则背景图像将拉伸以适应。

于 2013-04-26T21:17:09.653 回答