引导轮播作为网站背景

Posted 2023-03-06

【中文标题】引导轮播作为网站背景

【英文标题】：Bootstrap carousel as website background

【发布时间】：2013-10-28 11:31:43

【问题描述】：

我正在使用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;

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

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

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

【参考方案1】：

我会在 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;

【参考方案2】：

问题已解决。代码源是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>

【讨论】：

很抱歉发布了 necroposting 但也有类似的问题。我不知道什么是.one、.two 和.three 类？它们不在 html 中。我想，它们与“项目二”之类的类有关，但它们不是作为类提交的。你能澄清一下吗？

@Moveton 作为对您的 necropost 的 necroanswer，CSS 类在 HTML 中以空格分隔，并且不以 . 为前缀，但在 CSS 中它们以 . 为前缀，因此在这种情况下，类在 HTML 示例中使用了one、two 和 three。