显示当前透明背景背后的轨道图像

Question

如何防止coffee.jpg出现在payme.png背后？我第一次加载网页时得到的结果都是图片，但是一旦我们循环浏览咖啡图片后，咖啡图片就不会再出现。

这是相对的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

埃德它的dollowing线轨道，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的我。