Question

我正在开发一个宽度为100％的Joomla网站，它也很敏感。

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

JS

 $(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>

CLUE

我尝试使用此代码，但也无效。

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

谢谢大家

Answer 1

检查此修复程序，IE行为将后台大小的支持添加到IE8。

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

Answer 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;
}

背景大小：用Jquery覆盖

2 个答案: