1

payme.png の背後に coffee.jpg が表示されないようにするにはどうすればよいですか? Webページを最初にロードしたときに得られる結果は両方の画像ですが、一度循環すると、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; 
}
4

3 に答える 3

1

私は以前に透明な画像でこの問題を経験し、3つのオプションを見つけました：

于 2013-02-23T14:45:01.973 に答える
0

left: 0px同じ問題を経験したので、最初のスライドで orbit 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 に答える