Question

如何防止coffee.jpg出现在payme.png后面？我在第一次加载网页时得到的结果都是图像，但是在我循环浏览它们之后，一旦不再看到coffee.jpg。

这是相对的test.html

<div class="container">

    <div id="featured"> 
        <img src="these/payme.png" />      // has transparent background
        <img src="these/coffee.jpg" />     // shows up behind payme.png
    </div>

</div>

和orbit.css

.container {
    position: absolute; 
    top: 50%; 
    left: 50%;
    margin: -250px 0 0 -420px; 
}

#featured { 
    width: 850px;
    height: 425px;
    background: rgba(0,0,0,0);
overflow: hidden; 
}

#featured>img,  

#featured>div,

#featured>a { display: none; }

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative; 
}

div.orbit {
    width: 1px;
    height: 1px;
    position: relative;
    overflow: hidden 
}

div.orbit>img {
    position: absolute;
    top: 0;
    left: 0;
    display: none; 
}

div.orbit>a {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0; 
    display: none; 
}

.orbit>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 850px;
    height: 425px; 
}

Answer 1

我以前使用透明图像遇到过这个问题，并找到了3个选项：

只需给你的幻灯片背景颜色（许多人似乎认为这是最佳/唯一的选择）。
使用轨道文档中提供的“优雅加载”方法：http://foundation.zurb.com/docs/orbit.php（我刚才注意到，奇怪的是在那里没有很好地实现..）。
尝试一些比较困难的解决方案，这些解决方案会被许多其他似乎有这个问题的人解决（谷歌“轨道堆叠图像”等）：
https://github.com/zurb/foundation/issues/228#issuecomment-8174780
https://github.com/zurb/foundation/issues/228#issuecomment-8250138
https://groups.google.com/forum/?fromgroups=#!topic/foundation-framework-/QeWXr6JBprE

Answer 2

在多条线上编辑orbit-1.2.3.css文件

行：11至15

#featured { 
    width: 940px;
    height: 450px;
    /*background: #000 url('orbit/loading.gif') no-repeat center center;*/
    overflow: hidden;
}

在以下行中编辑jquery.orbit-1.2.3.js文件。

行：88到94看起来像这样：

//Set initial front photo z-index and fades it in
slides.eq(activeSlide)
.css({"z-index" : 3})
.fadeIn(function() {
//brings in all other slides IF css declares a display: none
slides.css({"display":"block"})
});

将其更改为：

//Set initial front photo z-index and fades it in
slides.eq(activeSlide)
.css({"z-index" : 3})
.fadeIn(function() {
//brings in all other slides IF css declares a display: none
//slides.css({"display":"block"})
});

然后转到第305行并将其编辑为如下所示：

.css({"z-index" : 1, "display" : "none"});

第337行将其更改为：

.css({"z-index" : 2, "display" : "none"});

第343行：

.css({"opacity" : 0, "z-index" : 3 , "display" : "block"})

第351行：

.css({"left": orbitWidth, "z-index" : 3, "display" : "block"})

第357行：

.css({"left": -orbitWidth, "z-index" : 3, "display" : "block"})

第366行：

.css({"top": orbitHeight, "z-index" : 3, "display" : "block"})

第372行：

.css({"top": -orbitHeight, "z-index" : 3, "display" : "block"})

第381行：

.css({"left": orbitWidth, "z-index" : 3, "display" : "block"})

第390行：

.css({"left": -orbitWidth, "z-index" : 3, "display" : "block"})

Answer 3

遇到同样的问题后，我发现我在第一张幻灯片中设置了轨道js附加css left: 0px的解决方案。

setupFirstSlide: function () {
  ...
  .css({"z-index" : 3,"left":"0px"})
  ...
}

然后将轨道CSS文件更改为：

.orbit .orbit-slide {
    max-width: 100%;
    position: absolute;
    top: 0;
    left:-910px;
 }

-910是持有div的宽度。

透明的png为我工作。

显示在当前一个之后的轨道图象有透明背景

3 个答案: