我有一個(gè)包含段落的div。我想添加一個(gè)半透明的背景圖像到段落中，但高度只能與段落的高度相同。我有:

<div id = "phase1box">
    <div id = "phase1content" class = "phasecontent">
        <h1>Phase 1</h1>
        <p>
        ?   some text.<br/>
        ?   some text.<br/>
        ?   some text.<br/>
        ?   some text.<br/>
        ?   some text.<br/>
        </p>
    </div>
</div>

CSS:

#phase1box {
    position: absolute;
    top: 0%;
    width:100%;
    height:18%;
    background-image: url("../assets/phase1box.png");
}

我有硬編碼的高度:18%,但我希望背景圖像采取div(段落)的高度。如果我做高度:自動(dòng)沒(méi)有背景圖像出現(xiàn)。

【最終答案】

正如我第一個(gè)答案中的絕對(duì)定位揭示了棋盤(pán)效應(yīng)(以下元素的重疊)，這種方法當(dāng)然更好:

#content {
  width: 100%;
}

#overlay {
  background: url(https://picsum.photos/800);
  background-repeat: no-repeat;
  background-size: fill;
  background-position: center;
}

<div id="before">
  some div
</div>
<div id="content">
  <div id="overlay">
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
  </div>
</div>
<div id="after">
  other div
</div>

方法1: 嘗試給出背景大小，背景位置，背景重復(fù)的CSS屬性

#phase1content {
  position: relative;
}
#phase1box {
  position: absolute;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

<div id="phase1content" class="phasecontent">
  <div id="phase1box">
    <h1>Phase 1</h1>
    <p>
      ? some text.<br/> 
      ? some text.<br/> 
      ? some text.<br/> 
      ? some text.<br/> 
      ? some text.<br/> 
      ? some text.<br/> 
      ? some text.<br/>
    </p>
  </div>
</div>