Question

所以我仍然是jQuery和javascript的新手，所以当插件在Firefox中运行时，我已经试着用代码来解决我的问题。没有骰子，所以我来这里寻求一些建议（或许可以解释为什么会出现以下问题）。

这里的问题是我有一些其他Div，低于包含旋转木马的Div。在Firefox中，它最终用透明度替换了我所有的其他图像和颜色背景，揭示了我所有内容背后的轮播。

下载插件的代码：

$('.header-carousel').carousel({
    pause: "false",
    interval: 4000
});

$('.header-carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
$('.header-carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
$('.carousel-inner div.item img').each(function() {
    var imgSrc = $(this).attr('src');
    $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
    $(this).remove();
});

$(window).on('resize', function() {
    $('.header-carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
});

希望我能够有效地解释这一点，我几天来一直在努力解决这个问题......

编辑：

我在jsfiddle上做了一个例子。滚动时强制旋转木马不能保持固定在背景状态的最佳方法是什么？

https://jsfiddle.net/pavelcreates/8nxwzgjz/

Answer 1

我通过添加z-index规则解决了问题：

.header-carousel { z-index: -101; }

Bootstrap的旋转木马喜欢将图像投放到z-index: -100;，因此抛出全屏旋转木马会修复我之前缺少的背景图像和颜色的所有问题。

Firefox中全屏Bootstrap轮播插件的问题

1 个答案: