Question

我正在创建一个带有背景图片滑块的网站，其中图片必须覆盖div元素的100％宽度和高度。问题是在Safari和Chrome中一切正常，但在Opera和Mozilla Firefox中，图像无法扩展。

我尝试添加'-o-background-size：cover'和'-moz-background-size：cover'，但这并没有成功。

这是代码：`

---HEAD---

        ....
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

        <script type="text/javascript">
         $(document).ready(function()
            {
         var imgArr = new Array() // relative paths of images
         imgArr[0]="images/artema_big.jpg";
         imgArr[1]="images/donskoi_big.jpg";
         imgArr[2]="images/dzerzhinski_big.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, 1000);

         /* image rotator */
         function changeImg(){
         $(".fakeBackground").animate({opacity: 0}, 1000, function(){
         $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')top left no-repeat');
         }).animate({opacity: 1}, 1000);

         };

         });

        </script>



    </head>
<body>

    <div class="parent">
     <div class='fakeBackground'></div>

         <div class="menuLeft">
         <div class="logo"></div>
            <ul id="menu">
                <li class="about"><a href="http://">О клубе</a></li>
                <li class="offers"><a href="http://">Услуги</a></li>
                <li class="cards"><a href="http://">Карты</a></li>
                <li class="personal"><a href="http://">Персонал</a></li>
                <li class="news"><a href="http://">Новости</a></li>
                <li class="contacts"><a href="http://">Контакты</a></li>

            </ul> 


        </div>
      </div>
            <div class="rightBottom"><img src="images/virtualTour.png" alt="virtual_tour" /></div>
     </div>
        </div>



</body>
</html>

和CSS：

    *{
    margin: 0px;
    }
    body, html{
    height: 100%;
    margin: 0px;
    }

    .parent {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    position: relative;

    }   
    .parent .fakeBackground {
     position: absolute;
     z-index: -1;
     width: 100%;
     height: 100%;
     margin: 0px auto;
     background-size: cover;
     -o-background-size: cover;
     background: url(../images/artema_big.jpg) no-repeat;
     background-position: center center;
     }

    .logo{
    width: 188px;
    height: 78px;
    background-image: url(../images/logo.png);
    margin-bottom: 20px;
    margin-left: 60px;
    }

    .menuLeft{

    width: 678px;
    height: 100%;
    background-image: url(../images/artemaDescr.png);
    background-size: cover;
    background-repeat: no-repeat;
    }

    #menu li{
    list-style: none;
    margin-bottom: 10px;
    position: relative;
    }

    #menu li a{
    font-family: Arial;
    font-size: 14px;
    border-bottom: 1px dotted;
    text-decoration: none;
    color: #373e96;
    }

    /*Menu Items*/

    .about{

    margin-left: 70px;
    }

    .offers{
    margin-left: 60px;
    }

    .cards{
    margin-left: 50px;
    }

    .personal{
    margin-left: 11px;
    }

    .news{
    margin-left: 5px;
    }
    .contacts{
    margin-left: -10px;
    }

    .rightBottom{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 301px;
    height: 520px;
    display: block;
}

任何帮助将不胜感激。

PS。该网站的链接是：http://sportmax.codo.dn.ua

Answer 1

问题可能是'背景'会覆盖'背景大小'。

this answer

因此，必要时将背景放在首位。

Mozilla和Opera的背景大小：封面'不起作用

1 个答案: