轮播覆盖背景图片答案

【问题标题】：Carousel overlaying background image轮播覆盖背景图片
【发布时间】：2017-11-15 10:32:39
【问题描述】：

Soo...如果有人有几分钟的空闲时间，可以看看我的代码并在这里帮助我...我有一个我无法解决的问题，并且已经困扰了好几个小时...

所以我正在使用 Bootstrap 为当地的市际足球协会制作一个页面，我正在尝试实现 这个： 覆盖背景图像的轮播，不要介意蓝色和黄色的东西.. .

这就是我得到的：

这是我的代码： HTML：

<!--Background image-->
  <div class="bg">
    <img src="img/football-field.jpg" class="img-responsive" alt="ozadje">
  </div>

<!--Main content of page-->    
<section id="main-content">
        <div class="container">
          <div class="col-md-2 col-sm-2 navigation">
            content content
            content content
            content content
            content content
            content content
            content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-md-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="img/example.jpg" alt="desc">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="desc">
                </div>

                <div class="item">
                  <img src="img/example.jpg" alt="desc">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>

还有我的CSS：

.bg{
  height: 420px;
  z-index: -999;
}

#main-content{
  z-index: 100;
  background-color: white;
}

我真的很感激一些帮助:)

PS我希望你能理解我的意思并努力完成...英语不是我的母语，所以可能会有一些糟糕的单词选择、糟糕的解释和很多错别字： )

【问题讨论】：

您能否提供带有实际内容/图像的实时网址以进行更简单的调试？

标签： html css twitter-bootstrap background carousel

【解决方案1】：

仅使用 z-index 在背景图片上显示内容是行不通的。实际上，z-index 只适用于具有绝对或固定位置的元素。

实现您想要的最简单且我认为最简洁的方法是将图像作为页面背景（使用 css 'background' 属性）。

#main-content{
background-image: url('img/football-field.jpg');
background-color: white;
}

另一种方法是让您的部分与背景 div 重叠。

#main-content{
position: absolute;
top: 0;
left: 0;
background: none;
}

【讨论】：

【解决方案2】：

您可以为元素设置位置值，以便 z-index 起作用。要么你使用位置fixed, absolute, or relative。请注意，它们并不相同，您需要向其中添加一些 css。请看说明here。

示例：

header {
  height: 100px;
  position: relative;
}

header img {
  width: 100%;
  height: 100%;
}

.start {
  position: absolute;
  z-index: 100;
  top: 0;
}

.navigation {
  background: #F7F7F7;
}

#main-content{
  position: relative;
  background-color: white;
  margin-top:-1.5em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
  </div>
</nav>

<!--Main content of page-->    
<section id="main-content">
  <header>
    <img src="https://image.shutterstock.com/z/stock-photo-american-football-players-in-the-action-grand-arena-345202907.jpg" alt="ozadje">
  </header>
        <div class="container start">
          <div class="col-md-2 col-xs-2 navigation">
            content content
            content content
            content content
            content content
            content content
            content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-xs-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://via.placeholder.com/950x250" alt="desc">
                </div>

                <div class="item">
                  <img src="http://via.placeholder.com/950x250" alt="desc">
                </div>

                <div class="item">
                  <img src="http://via.placeholder.com/950x250" alt="desc">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>

【讨论】：

【解决方案3】：

如果你运行它看起来不太好，但你也许可以从这段代码中得到一个想法。您可以在 css 中设置背景图像，而不是使用 div 并插入图像（这会将您的 div 向下推）：

#main-content{
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Football_iu_1996.jpg/1200px-Football_iu_1996.jpg");
  background-color: white;
}

.item img {
  min-width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!--Main content of page-->    
<section id="main-content">
        <div class="container">
          <div class="col-md-2 col-sm-2 navigation">
            content content
            content content
            content content
            content content
            content content
            content content
          </div>
          <!--Beginning of carousel-->
          <div class="col-md-10 col-md-10 galery">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://lorempixel.com/400/200/sports/" alt="desc">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/400/200/sports/" alt="desc">
                </div>

                <div class="item">
                  <img src="http://lorempixel.com/400/200/sports/" alt="desc">
                </div>
              </div>

              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </section>

它可能并不完全符合您的要求，但它可能会帮助您走上正轨。

希望对你有所帮助。

【讨论】：