html - 某些内容不适用于网站背景

标签 html css background

我正在尝试做类似的事情(背景图片覆盖整页) https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm 我不知道为什么我的代码不起作用。也许是 html 的问题,这就是为什么我删除了大部分代码来检查它,但没有用。这就是为什么我认为这是 css 的问题。但是我不知道。这是我的代码

<!doctype html>
<html lang = "pl">
<head>
<meta charset = "utf-8" />

<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

<!--<link rel = "stylesheet" type = "text/css" href = "style.css" /> -->

<style>
body {
margin: 0;
padding: 0;
height: 100%;
}

.clear{
clear:both;
}
#head{
/*https://pixabay.com/pl/users/Tama66-1032521/*/
background-image:url("railway.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
}

#space1{
width:20%;
float:left;
}

</style>
</head>
<body>
<div id = "container">
<header>
<div id = "head">
<div id = "menu">

<div id = "space1">
</div>

<div id = "menulist">
<ol id = list>
<li><a href = "#"></a></li>
<li><a href = "#"></a></li>
<li><a href = "#"></a></li>
<li><a href = "#"></a></li>
</ol>
</div>

<div class = "clear">
</div>

</div>
</div>
</header>

</div>
</body>
</html>

最佳答案

除了在body上设置height:100%,还需要加上这个

html{height:100%}

当您在任何元素上设置 height:100% 时,这意味着您要求该元素占据与父元素的高度 一样多的高度。父元素需要明确指定一些高度。只有这样它才能工作(元素上的 position:absoluteposition:fixed 除外)。在这里,您没有在 body 的父级 html 上指定 height。您可能会问 html 自己的高度应该基于谁的高度。那个,我没有答案。也许看到这个问题的人会有答案。

关于html - 某些内容不适用于网站背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44954481/

相关文章:

javascript - 在屏幕上显示每个 div 的 jquery 效果

html - 复合图像背景 CSS 显示连续性

jquery - 图像未反射(reflect)其属性

swift - 垂直移动 Swift 背景中的黑线

html - 在 CSS 中重新创 build 计

javascript - jquery slideToggle 在 ContentPlaceHolder 中不起作用

html - Logo 和页眉文本未对齐且重叠

jquery - 背景不拉伸(stretch)

html 标签在 ajax 中不起作用

css - 是否有 CSS 父级选择器?