css - Bootstrap 轮播作为网站背景

Question

我正在使用 twitter bootstrap carcass用于我的网络元素开发。目前我有全屏背景图片，我为 body 标签设置如下:

body {
  background: url('Content/images/planet.gif') no-repeat center center fixed;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

它看起来不错，当我尝试更改浏览器窗口大小时，调整大小效果很好。

现在我想通过添加背景轮播来为我的网站添加一些视觉效果。有没有办法在整个后台实现标准的 Bootstrap 轮播？

我找到了一个可能的解决方案 HERE ，但让我感到困惑的是用于不同图像的 img 标签。我试图通过后台 url 执行相同的操作，但无法弄清楚。

Answer 1

问题已经解决。代码来源是HERE .这比我想象的要容易:

HTML:

<div id="myCarousel" class="carousel container slide">
<div class="carousel-inner">
        <div class="active item one"></div>
        <div class="item two"></div>
        <div class="item three"></div>
</div>
</div>

CSS:

.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
    position: fixed; 
    width: 100%; height: 100%;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

}
.carousel .one {
    background: url(assets/img/slide3blur.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .two {
    background: url(assets/img/slide2blur.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .three {
    background: url(assets/img/slide1blur.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

JS:

<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({interval: 7000});
  });
</script>