我正在尝试做类似的事情(背景图片覆盖整页) 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:absolute
或 position:fixed
除外)。在这里,您没有在 body
的父级 html
上指定 height
。您可能会问 html
自己的高度应该基于谁的高度。那个,我没有答案。也许看到这个问题的人会有答案。
关于html - 某些内容不适用于网站背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44954481/