如何使用文本创建引导滑块答案

【问题标题】：How to create bootstrap slider with text如何使用文本创建引导滑块
【发布时间】：2016-11-21 00:48:08
【问题描述】：

我想要像图片一样的引导滑块。我有默认的引导滑块样式，但不能像上面的图像和黑色透明黑色背景那样键入文本。是否可以在引导滑块中做到这一点？

HTML 代码

<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-12">
<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" role="listbox">
<div class="item active">
  <img src="images/slider/1.jpg" >
  <div class="carousel-caption">
    <div class="pull-left details">
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>
    </div>
  </div>
 </div>

<div class="item">
  <img src="images/slider/2.jpg" >
  <div class="carousel-caption">
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  </div>
</div>

<div class="item">
  <img src="images/slider/3.jpg" >
  <div class="carousel-caption">
    <h3>Flowers</h3>
    <p>Beatiful flowers in Kolymbari, Crete.</p>
  </div>
</div>


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

【问题讨论】：

是的，在 Bootstrap 中是可能的。对于简单的方法 - 使用带有暗边的图像，如演示图像所示。并将您的文本放在 Carousel-caption 中。它会工作
我想要一个黑色透明的图像。该怎么做？
为我创建整个示例将非常耗时。使用 rgba(0,0,0,0.8) 颜色作为图像的背景。

标签： html twitter-bootstrap

【解决方案1】：

查看下面这段代码，我在代码中添加了注释，您可以在其中更改图像的暗度。

 /* darken the control area */

.carousel .carousel-control {
  opacity: 1
}
.carousel .carousel-control.left {
  background-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel .carousel-control.right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 100%);
}


 /* add darkness over the image */
.item {
  position: relative
}
.item:before {
  content: '';
  background: rgba(0, 0, 0, 0.2);
  /* change this value from 0.1 to 1; */
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <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" role="listbox">
            <div class="item active">
              <img src="https://2.bp.blogspot.com/-qq-NOKmEBKY/Vu62cHdKiCI/AAAAAAAADdQ/0ehpnueSCYgC0apw26k_N5U9-tXgNenXw/s1600/Finding_Dory_3.jpg" class="center-block img-responsive" alt="">
              <div class="carousel-caption">
                <div class="pull-left details">
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>
                </div>
              </div>
            </div>

            <div class="item">
              <img src="http://www.killermoviereviews.com/wp-content/uploads/FindingNemoMarlinDorry.jpg" class="center-block img-responsive" alt="">
              <div class="carousel-caption">
                <h3>Chania</h3>
                <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
              </div>
            </div>

            <div class="item">
              <img src="https://2.bp.blogspot.com/-CFmCdgEVXI8/Vu62aODejkI/AAAAAAAADdE/rZU_i432umYxHYJvPnFXIIcQ7I1krzIOg/s1600/Finding_Dory_2.jpg" class="center-block img-responsive" alt="">
              <div class="carousel-caption">
                <h3>Flowers</h3>
                <p>Beatiful flowers in Kolymbari, Crete.</p>
              </div>
            </div>


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

【讨论】：