我正在使用
twitter bootstrap carcass进行Web项目开发.
目前我有全屏幕背景图像,我为body标签设置如下：
目前我有全屏幕背景图像,我为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标签用于不同的图像.我试图通过背景网址做同样的事情,但无法弄明白.
解决方法
问题已经解决了.代码来源是
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>
