Question

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 我希望你明白我的意思并且正在努力实现...英语不是我的母语所以可能会有一些不好的选择，错误的exlenation和很多错别字：）

Answer 1

仅使用z-index在背景图片上显示您的内容将无法正常工作。实际上，z-index仅适用于具有绝对或固定位置的元素。

最简单，我相信最干净的方式来实现您想要的是将您的图像作为您的页面背景（使用css＆＃39;背景＆＃39; proprety）。

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

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

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

Answer 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>

Answer 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>

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

希望它有所帮助。

转盘背景图像的旋转木马

3 个答案: