Question

在图像旋转器js中，标签背景大小不起作用，图像不会覆盖整个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/

Answer 1

将height:100%;添加到#banner元素，因为#banner的{{1}}小于其父height: 500px;}。

Jsfiddle

#contact height:950px;

背景图片不会覆盖div

1 个答案: