CSS:扩展到某个元素的背景色
CSS:扩展到某个元素的背景色
提问于 2016-02-01 06:57:37
我有以下代码
<body>
<div style="height: 35%; background-color: black;"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
</div>
</div>
</body>理想情况下，我希望页面的顶部是某种颜色(在本例中为黑色)，并且希望页眉区域(包含<h1>和<h3>元素)位于黑盒内。然后我希望内容的第一段也包括在黑盒内。与这张图非常相似：
做这件事最好的方法是什么？
回答 3
Stack Overflow用户
发布于 2016-02-01 07:20:24
最简单的方法是在header上使用绝对定位的伪元素
堆栈代码段
body {
background-color: #ddd;
margin: 0;
}
#header {
position: relative;
color: white;
background-color: black;
}
#header::before {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 60px;
width: 100%;
background-color: inherit;
}
#header div {
width: 80%;
margin: 0 auto;
padding: 10px;
}
#content {
position: relative;
width: 80%;
margin: 0 auto;
background-color: white;
}<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
<p>
Thre
</p>
<p>
Fou
</p>
</div>
</div>
Stack Overflow用户
发布于 2016-02-01 07:11:21
三个步骤：
- 将渐变背景应用于两个分段元素：
<header>和<header>中的所有相关元素以及<section>顶部的所有相关元素都具有显式声明的高度(以像素为单位)，这些像素组合在一起将与渐变的第一部分的高度相匹配。
Stack Overflow用户
发布于 2016-02-01 07:11:32
确保html和body的高度: 100%或min- height : 100%，否则高度35%将不会是视窗高度的35%。
您可以使用绝对定位元素来制作黑色背景。我建议查看css位置(相对、绝对、固定、静态)。
这是一个演示和代码：
https://jsfiddle.net/n617L6rh/
<div id="bg"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>One</p>
<p>Two</p>
</div>
</div>html,
body {
height: 100%;
}
#bg {
height: 35%;
background: black;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#header {
height: 35%;
color: #fff;
position: relative;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35120584
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号