GSt*_*Sto 32 css twitter-bootstrap
我正在尝试使用Twitter的Bootstrap框架开发一个新项目,但我遇到了问题.我想要一个完整的身体背景,但背景似乎仅限于容器div的高度.这是HTML/CSS代码:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
如何让身体占据整个屏幕？
thi*_*dot 36
您需要添加以下内容:
html { background: transparent }
或者,改为设置"页面背景"(background: black)html,这很好.
为什么？在Bootstrap里面,有这样的:
html,body{background-color:#ffffff;}
(请记住默认background值是transparent)
有关其重要性的更多信息,请参阅:将hss应用于html与body相比有什么区别？
请注意,这不再是Bootstrap 3+的问题.
在CSS中将html和body的高度设置为100%.
html, body { height: 100%; }
然后它应该工作.问题是身体的高度自动计算为内容的高度,而不是整个屏幕的高度.
/*这里是纯CSS解决方案*/
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>