标题元素不显示背景
标题元素不显示背景
提问于 2019-03-12 01:32:36
我是webdev的新手，我正在关注一个在线教程并遇到一个奇怪的问题。它实际上发生在2个独立的站点和示例代码中，因此我想知道这是什么原因。尝试将背景图像设置为css中的标题元素时，图像仅在标题元素中写入时显示。教程显示那里的图片，即使元素为空。图片的路径是正确的。谢谢你的帮助！这就是它放在css文件中所说的内容，显然header元素是空的
.header {
background-image: url('photos/frames.jpg');
background-size: cover;
background-position: center;
position: relative;
}
回答 2
Stack Overflow用户
发布于 2019-03-12 10:26:13
原因是您没有为.header元素添加任何大小。如果没有尺寸，则无法显示背景。为此元素添加文本时，将创建大小并显示背景。
这么简单的解决方案：
.header {
background-image: url('photos/frames.jpg');
background-size: cover;
background-position: center;
position: relative;
width: 100%; // or use px, rem, em units
height: 100%; // or use px, rem, em units
}
您的HTML未知，因此无法提供更多帮助。
Stack Overflow用户
发布于 2019-03-12 11:09:05
在下面的代码片段中，标题在css中有一个背景图片，但由于标题中没有任何内容，标题没有高度，因此没有显示任何内容。如果指定了高度，则将显示bg图像
header {
background-image: url('https://assets-natgeotv.fnghub.com/Shows/2040.jpg');
background-repeat: no-repeat;
background-size: contain;
}<header>
<header>在下面的代码片段中，我添加了文本（并添加了边距和填充以使背景更加明显）。即使我刚刚添加了没有样式/ css的文本，标题也会变大，因此显示一些背景，但是通过添加css，背景显示了我们想要它的方式和时间。
header {
background-image: url('https://assets-natgeotv.fnghub.com/Shows/2040.jpg');
background-repeat: no-repeat;
background-size: contain;
}
p.head {
height: 100px;
color: red;
margin: 10 auto;
padding: 20px;
overflow-y: auto;
width: auto;
}<header>
<p class="head">Hello</p>
</header>如果你想在其中没有任何内容（没有文字/覆盖图像等）的情况下显示标题，请在headercss中设置高度：
header {
background-image: url('https://assets-natgeotv.fnghub.com/Shows/2040.jpg');
background-repeat: no-repeat;
background-size: contain;
height:100px;
}<header>
</header>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006431
复制相关文章
相似问题
腾讯云开发者
