我试图使用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>
如何让身体占据整个屏幕?
解决方法
您需要添加:
html { background: transparent }
或者,在html上设置“页面背景”(背景:黑色),这是很好。
为什么?内部Bootstrap,有这里:
html,body{background-color:#ffffff;}
(请记住默认背景值是透明的)
有关为什么这一点的更多信息,请参阅:What is the difference between applying css rules to html compared to body?
注意,这不再是Bootstrap 3的问题。