Question

我目前正在使用Twitter引导程序并在尝试让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;
}

Answer 1

使用Bootstrap时，正文的背景不透明，因此它会遮挡您放在html元素上的背景图像。尝试

body { background: transparent; }

Bootstrap全背景图像被推倒

1 个答案: