html - Bootstrap 完整背景图像被下推

标签 html css twitter-bootstrap

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

我的专栏后面没有背景图像,而是实际上将背景图像推到页面的最底部,而不是让它位于它们后面。

这里有什么想法吗?

这就是正在发生的事情 Screenshot of error

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;
}

最佳答案

使用 Bootstrap,正文的背景不透明,因此它会遮挡您放入 html 元素的背景图像。尝试一下

body { background: transparent; }

关于html - Bootstrap 完整背景图像被下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19939533/

相关文章:

html - 尝试垂直对齐图像但也将其向左浮动

Jquery Popeye 插件 z-index 问题 IE7

html - margin-bottom问题,这是IE的BUG吗?

html - 调整图像以适应屏幕

javascript - Bootstrap 3 - 如何使用 javascript/jquery 更改显示为工具提示的超链接标题文本?

html - 在线使用 CSS 使列高相等

html - 2个div在同一行?

css - Div 在 Firefox 中渲染不正确

html - 如何应用内部 Bootstrap/CSS Padding?

javascript - 切换单选按钮选项时执行操作