CSS Bootstrap 轮播作为网站背景

Bootstrap carousel as website background

提问by mbigun

I'm using twitter bootstrap carcassfor my web project development. Currently I have full screen background image which I set for the body tag like:

我正在使用twitter bootstrap carcass进行我的 web 项目开发。目前，我为 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;
}

It looks nice, and resizing works perfectly when I'm trying to change browser window size.

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

Now I would like to add some visual effects to my website by adding background carousel. Is there way to implement standard bootstrap carousel to the whole background?

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

I found a possible solution HERE, but what confuses me - is img tags which are using for different images. I was trying to do the same through background url's, but can't to figure it out.

我在这里找到了一个可能的解决方案，但让我感到困惑的是用于不同图像的 img 标签。我试图通过背景网址做同样的事情，但无法弄清楚。

回答by mbigun

Problem has been solved. Source of code is HERE. It's easier than I thought:

问题已经解决。代码来源在这里。这比我想象的要容易：

HTML:

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:

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:

JS：

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

回答by user1481214

I would add to mbigun's reply to use this css to keep the images from jerking:

我会在 mbigun 的回复中添加使用此 css 来防止图像抖动：

.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
position: fixed; 
 opacity: 0;
 left:0 !important;
width: 100%; height: 100%;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.carousel .one {
background: url(../images/layout/bgimages/homepage1.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .two {
background: url(../images/layout/bgimages/homepage2.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .three {
background: url(../images/layout/bgimages/homepage3.jpg);
background-size: cover;
-moz-background-size: cover;
}

.carousel .active {
opacity: 1 !important;
}

.carousel .left {
opacity: 1 !important;
-webkit-transition: opacity 0.5s  !important;
-moz-transition: opacity 0.5s  !important;
-ms-transition: opacity 0.5s  !important;
-o-transition: opacity 0.5s  !important;
transition: opacity 0.5s  !important;
}