1

如何防止 coffee.jpg 出现在 payme.png 后面？我第一次加载网页时得到的结果是两个图像，但是在我循环浏览它们之后，一旦咖啡.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>

和轨道.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; 
}
4

3 回答 3

1

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

于 2013-02-23T14:45:01.973 回答
0

编辑 dollowing 行上的 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"})
于 2013-05-20T15:33:15.030 回答
0

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

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

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

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

-910是控股 div 的宽度。

对我有用透明的png。

于 2013-11-05T22:42:16.023 回答