1

私がやろうとしているのは、テキストの量に応じて背景画像の高さを変えることです。

元。画像の高さは 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;
}
4

2 に答える 2

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

heightコンテナに合わせて背景が引き伸ばされますが、明示的でwidthオンに設定されている限り、テキストのサイズは変更されません.scroll-bg-img

それらを削除して、テキストの高さに合わせてサイズを変更すると、背景画像が収まるように引き伸ばされます。

于 2013-04-26T21:17:09.653 に答える