英文:
How to make background image height same as height of div content?
问题
我有一个包含段落的 div。我想在段落上方添加一个半透明的背景图像，但只要与段落的高度相同。我有：
<div id="phase1box">
<div id="phase1content" class="phasecontent">
<h1>Phase 1</h1>
<p>
• 一些文本。<br/>
• 一些文本。<br/>
• 一些文本。<br/>
• 一些文本。<br/>
• 一些文本。<br/>
</p>
</div>
</div>
CSS:
#phase1box {
position: absolute;
top: 0%;
width:100%;
height:auto;
background-image: url("../assets/phase1box.png");
}
我已经硬编码了 height: 18%，但我希望背景图像占据 div（段落）的高度。如果我设置 height: auto，则不会显示背景图像。
英文:
I have a div containing a paragraph. I want to add a translucent background image to the paragraph but only upto height same as height of the paragraph. I have:
<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");
}
I have hard coded height: 18% but instead i want the background image to take height of the div (paragraph). If i do height: auto no background image shows up.
答案1
得分: 1
[final answer]
绝对定位在我的第一个回答中显示了版块效果（后续元素重叠），这种方法确实更好：
#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>
[first answer]
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>
英文:
[final answer]
As absolute positioning in my first answer reveals board effects (overlapping of following elements), this approach is certainly better:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
#content {
width: 100%;
}
#overlay {
background: url(https://picsum.photos/800);
background-repeat: no-repeat;
background-size: fill;
background-position: center;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
[first answer]
phase1box in your code is a container. Instead, we could consider it as an overlay on phase1content, so reverse the hierarchy as follow :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#phase1content {
position: relative;
}
#phase1box {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url(https://picsum.photos/800);
background-size: cover;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
width 100% as requested. Certainly perfectible.
答案2
得分: 1
方法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，无需使用position属性...
英文:
Method 1:
Try this to give background-size, background-position, background-repeat CSS properties
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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%;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Method 2:
You can also use a direct background image as parent div #phase1content without position stuffs...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论