Bootstrap转盘作为网站背景 [英] Bootstrap carousel as website background
问题描述
我正在使用 twitter bootstrap carcass 进行我的网络项目开发。
目前我有一个全屏的背景图片,我为body标签设置:
I'm using twitter bootstrap carcass for my web project development. Currently I have full screen background image which I set for the body tag like:
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;
}
看起来不错,
现在我想添加一些视觉效果到我的网站,通过添加背景旋转木马。有没有办法实现标准的引导旋转木马到整个背景?
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?
我发现了一个可能的解决方案这里,但令我困惑的是 - img标签,它们用于不同的图像。
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.
推荐答案
问题已经解决了。代码来源是此处。比我想象的容易:
Problem has been solved. Source of code is HERE. It's easier than I thought:
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>
这篇关于Bootstrap转盘作为网站背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!