[英]Parallax effect on bootstrap carousel won't work in Firefox
在我的網站上,我制作了一個引導輪播,其中有不同的幻燈片,每個幻燈片都有視差效果。
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view slidescss" style="background:url('https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg')no-repeat fixed center;">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view slidescss" style="background:url('https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg')no-repeat fixed center;">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view slidescss" style="background:url('https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg')no-repeat fixed center;">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
自己的CSS類:
.slidescss{
background-size:1920px 1080px;
width:100%;
min-height:800px;
}
在任何瀏覽器中,然后在Firefox中嘗試此操作。 在Firefox中,標題位於圖像上方,背景為白色或灰色。 它將圖像向下推。 我通過從background:url()
刪除center
屬性來解決此問題。 但是它仍然沒有視差效果。
與沖突
-webkit-transform: translate3d(0,0,0);
您可以刪除它,然后它將起作用。
https://jsfiddle.net/aq9Laaew/16131/
親切的問候,拉科烏
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.