javascript - 背景图片不覆盖div

在图像旋转器js中，标签background-size无效，图像无法覆盖整个div ...有人可以帮我吗？

 <script language="JavaScript" type="text/javascript">
 $(document).ready(function(){

 var imgArr = new Array( // relative paths of images
 'imgs/contact/01.png',
 'imgs/contact/03.png',
 'imgs/contact/02.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, 6000);

 /* image rotator */
 function changeImg(){
 $('#contact #banner').animate({opacity: 0}, 1000, function(){
 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat','background-attachment', 'fixed','background-size','cover');
 }).animate({opacity: 1}, 1000);
 }

 });
</script>

我不知道js上的CSS是否做得好，写得对...

HTML：

<div id="contact">
    <div id="banner" style="background-size: cover;"></div>
</div>

CSS：

#contact {
            background: #fff;
            width: 100%;
            height: 950px;
        }
#contact #banner {
            background: url('imgs/contact/01.png') center center no-repeat;
            background-size: cover;
            background-position-y: 40%;
            width: 100%; height: 500px; margin-top: -50px;
        }

https://jsfiddle.net/87z5p17e/

最佳答案

将height:100%;添加到#banner元素，因为#banner的height: 500px;小于其父级（#contact height:950px;）。

Jsfiddle

#contact #banner {
    background: url('http://www.barrymellorphotography.co.uk/assets/Uploads/landscapes-13.jpg') center center no-repeat;
    background-size: cover;
    background-position-y: 40%;
    width: 100%;
    // height: 500px;
    height: 100%;
    margin-top: -50px;
}

关于javascript - 背景图片不覆盖div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33150536/