背景大小：用 jQuery 覆盖答案

【问题标题】：Background-size: cover with jQuery背景大小：用 jQuery 覆盖
【发布时间】：2013-05-04 21:49:57
【问题描述】：

我正在开发一个 100% 宽度的 Joomla 网站，它也是响应式的。

同时，我使用滑块（只是淡化效果）来显示多个图像，但问题来了。第一张图片（来自 CSS 背景），可以在移动设备上完美显示，但其他图片（来自 jQuery）则不能。

$(document).ready(function(){
    var imgArr = new Array(
        'imatgesheader/fons2.jpg',
        'imatgesheader/fons3.jpg'
    );
     
    var preloadArr = new Array();
    var i;
     
    /* preload images */
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }
     
    var currImg = 1;
    var intID = setInterval(changeImg, 100);
     
    /* image rotator */
    function changeImg(){
        $('#gk-header').animate({opacity: 0.05}, 2000, function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') ');
        }).animate({opacity: 1}, 1000);
    }
});

CSS 样式

    #gk-header {
      background-image: url('../images/fons.jpg') ;
      background-size: cover;
      -moz-background-size: cover;  
      background-position: center; 
      margin-bottom:32px;
      padding:130px 0;
      -webkit-box-shadow:inset 0 0 3px #ebebeb;
      -moz-box-shadow:inset 0 0 3px #ebebeb;
      -ms-box-shadow:inset 0 0 3px #ebebeb;
      -o-box-shadow:inset 0 0 3px #ebebeb;
      box-shadow:inset 0 0 3px #ebebeb;
      z-index: 1;
    }

HTML

    <section id="gk-header">
        <div class="container-fluid">
            <jdoc:include type="modules" name="header" style="none" />
        </div>
    </section>

线索

我尝试使用此代码，但也不起作用。

 $(this).css('background-size','cover','url(' + preloadArr[currImg++%preloadArr.length].src +') ');

【问题讨论】：

标签： css cover

【解决方案1】：

检查此修复，IE 行为将背景大小支持添加到 IE8。

https://github.com/louisremi/background-size-polyfill

【讨论】：

嘿@Dyaa 我几个月前解决了它，只是修改了所有从 CSS 传入的预设

【解决方案2】：

我为 http://WorldViewClock.com 做了类似的事情，这对我有用：

$(obj).css('background', 'url(https://s3.amazonaws.com/WVCRepo/w/' + locs[i] + '/1080/' + count[i] + '.jpg) no-repeat center center fixed');

#bgWrapper, #bgWrapper div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#bgWrapper {
.bgImg {
    -webkit-background-size: cover !important;
     -moz-background-size: cover !important;
         -o-background-size: cover !important;
                background-size: cover !important;
}

【讨论】：