2

我目前正在使用 twitter bootstrap 并在尝试让 html 背景图像全屏显示时遇到问题

他们实际上将背景图像推到页面的最底部而不是让它位于它们后面，而不是我的列在它们后面有一个背景图像。

这里有什么想法吗？

这是发生了什么错误的屏幕截图

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
        <div class="row">
            <div class="col-md-4"><img src="images/rock-overlook.jpg" class="img-responsive" alt="" /></div>
            <div class="col-md-4"><img src="images/rock-overlook.jpg" class="img-responsive" alt="" /></div>
            <div class="col-md-4"><img src="images/rock-overlook.jpg" class="img-responsive" alt="" /></div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS：

html { 
  background: url(../images/umbrellas.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
4

1 回答 1

3

使用 Bootstrap，body 的背景不是透明的，因此它会遮盖您放在 html 元素上的背景图像。尝试

body { background: transparent; }
于 2014-01-15T17:49:41.443 回答