我有一个包含段落的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
没有背景图像显示。
2条答案
按热度按时间hi3rlvi21#
[最终答案]
由于我的第一个答案中的绝对定位揭示了董事会效应(以下元素的重叠),这种方法当然更好:
[第一个答案]
代码中的
phase1box
是容器。相反,我们可以将其视为phase1content
上的覆盖,因此将层次结构颠倒如下:width
100%按要求。当然是完美的。7tofc5zh2#
方法1:尝试使用此方法来给予background-size,background-position,background-repeat CSS属性
方法2:您也可以使用直接的背景图像作为父div #phase1content,而无需位置填充...