Question

我遇到问题让css正在使用全屏滑块。它适用于Chrome，iPad和Android浏览器的游戏，但我在Mac的safari上有一个空白的背景。

基本上我正在使用猫头鹰旋转木马来创建支持全屏触摸的幻灯片。 html：

<body>
<div id="slides" class="owl-carousel">
<div class="item" style="background-image: url(img1.jpg);"><img src="img1.jpg" alt=""></div>
<div class="item" style="background-image: url(img2.jpg);"><img src="img2.jpg" alt=""></div>
<div class="item" style="background-image: url(img3.jpg);"><img src="img3.jpg" alt=""></div>

的CSS：

    #slides {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%; 
    width: 100%;
    z-index: 0;
}


#slides .owl-item .item{
    text-align: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#slides .owl-item .item img{
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}

在safari上，第一张图片显示正常，并且正确。更改为第二张或第三张图像时，背景为空白。如果我禁用'background-attachment：fixed;'它出现了，但没有正确定位。

以下是网站：www.samuiweddings.com

有什么想法吗？

全屏中心裁剪幻灯片使用野生动物园的CSS

0 个答案: