css 如何使背景图像的高度与div内容的高度相同?

dwbf0jvd  于 2023-05-30  发布在  其他
关注(0)|答案(2)|浏览(235)

我有一个包含段落的div。我想添加一个半透明的背景图像的段落,但只有高达高度相同的段落。我有:

<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");
}

我已经硬编码height: 18%,但我希望背景图像采用div(段落)的高度。如果我做height: auto没有背景图像显示。

hi3rlvi2

hi3rlvi21#

[最终答案]
由于我的第一个答案中的绝对定位揭示了董事会效应(以下元素的重叠),这种方法当然更好:

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

[第一个答案]
代码中的phase1box是容器。相反,我们可以将其视为phase1content上的覆盖,因此将层次结构颠倒如下:

#phase1content {
  position: relative;
}

#phase1box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}
<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>

width 100%按要求。当然是完美的。

7tofc5zh

7tofc5zh2#

方法1:尝试使用此方法来给予background-size,background-position,background-repeat 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>

方法2:您也可以使用直接的背景图像作为父div #phase1content,而无需位置填充...

相关问题