Question

我使用Bootstrap 3并且我对滑块有疑问：是否可以保持相同的背景而只有文本正在改变/滑动？如果是，那么正确的代码是什么？

Answer 1

使用bootstrap文档中的示例进行一些调整：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner"> /* set background on this element */
    <div class="item active">
     <div class="myplaceholder"></div> /* remove the <img> tags and replace with transparent div as a place holder */
      <div class="carousel-caption">
        <h3>This is the text that will scroll passed over a static background</h3>
      </div>
    </div>

获得静态背景的一种方法是在.carousel-inner上设置所需的背景。然后替换＆lt; IMG＆GT;没有背景颜色的div的元素。

.carousel-inner { background: red; }
.myplaceholder { height: 400px; width: 400px; }

这将允许.carousel-caption元素可见并且看起来只是在（在这种情况下）静态红色背景的顶部滚动。这有点像一个丑陋的黑客，所以你不得不重新考虑它，如果你想要它的响应，但希望这将使你走上正确的轨道。

Bootstrap滑块：使用静态背景更改文本

1 个答案: