私は 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;
}
見栄えが良く、ブラウザのウィンドウサイズを変更しようとすると、サイズ変更が完全に機能します。
次に、背景カルーセルを追加して、ウェブサイトに視覚効果を追加します。背景全体に標準のbootstrapカルーセルを実装する方法はありますか?
私は可能な解決策を見つけました [〜#〜]ここ[〜#〜] ですが、私を混乱させるのは、異なる画像に使用しているimgタグです。私はバックグラウンドURLを通じて同じことをしようとしましたが、それを理解することはできません。
問題は解決されました。コードのソースは [〜#〜] 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>
画像をぎくしゃくさせないためにこのcssを使用するためにmbigunの返信に追加します。
.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;
}