在IE8和以下使用jQuery循環透明PNG（24）問題循環

我使用jQuery循環來淡入幻燈片進/出。在IE8和以下使用jQuery循環透明PNG（24）問題循環

我的幻燈片有一個背景，它們在我的幻燈片中是半透明的PNG（使用標籤）。當幻燈片漸漸消失時，半透明區域有黑色斑點。這些斑點在幻燈片完全淡入後消失。

我已經在CSS中使用AlphaImageLoader得到了這種東西，但這些不能是背景圖像。

有什麼想法？如果需要，我可以設置演示。

在此先感謝您的幫助！

我已經簡化它，並在這裏上傳了一個例子：

http://dustland.markrichterjr.com/cycle/sample.html

HTML

  <ul class="trending-slides"> 
       <li> 
        <a href="#"><img src="assets/images/home-trending-phones.png" alt="Phones" /></a> 
        <div class="text"> 
         <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a> 
         <a class="learnmore" href="#">Learn More</a> 
         <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing 
         elit, sed do eiusmod tempor incididunt ut."</a></p> 
        </div> 
       </li> 
       <li> 
        <img src="assets/images/home-trending-tablets.png" alt="Tablets" /> 
        <div class="text"> 
        <div class="text"> 
         <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a> 
         <a class="learnmore" href="#">Learn More</a> 
         <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing 
         elit, sed do eiusmod tempor incididunt ut."</a></p> 
        </div> 
       </li> 
       <li> 
        <img src="assets/images/home-trending-accessories.png" alt="Accessories" /> 
        <div class="text"> 
        <div class="text"> 
         <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a> 
         <a class="learnmore" href="#">Learn More</a> 
         <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing 
         elit, sed do eiusmod tempor incididunt ut."</a></p> 
        </div> 
       </li> 
       <li> 
        <img src="assets/images/home-trending-support.png" alt="Support" /> 
        <div class="text"> 
         <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a> 
         <a class="learnmore" href="#">Learn More</a> 
         <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing 
         elit, sed do eiusmod tempor incididunt ut."</a></p> 
        </div> 
       </li> 
      </ul>

CSS

  .home-page-content .most-viewed .trending-slides, .home-page-content .most-viewed .trending-slides li { 
       width:630px; 
       height:124px; 
       margin:0; 
       padding:0; 
       overflow:hidden; 
       list-style:none; 
       background:transparent !important; 
      } 
      .home-page-content .most-viewed .trending-slides li { 
       background:url(../images/bg-home-trending.jpg) no-repeat 100% 0; 
      }

的JavaScript

$('.home-page-content .most-viewed .trending-slides').cycle({ 
     fx: 'fade', 
     before: function(currSlideElement, nextSlideElement) {}, 
     speedIn: 250, 
     speedOut: 100, 
     after: function(currSlideElement, nextSlideElement) { 
      $('.text', nextSlideElement).show('fade', 125); 
      $('.text', currSlideElement).hide(); 
     }, 
     sync: false, 
     timeout: 0, 
     pagerEvent: 'mouseover', 
     pager: '.trending-nav', 
     pagerAnchorBuilder: function(idx, slide) { 
      // return selector string for existing anchor 
      return '.trending-nav li:eq(' + idx + ') a'; 
     }, 
     cleartype: true, 
     cleartypeNoBg: false 
    });

來源

2011-07-23 Mark26855

給出IE8和早期有非常糟糕的透明度的支持。 JQuery爲你提供了一些工具，使它更容易在IE中使用透明度和淡入淡出效果，但它並沒有修復這些bug。 :-( – Spudley

應用程序中發生的事情是，IE7將alpha過濾器應用於您的PNG，然後由jQuery請求爲淡入淡出應用另一個alpha過濾器。這就像你說的那樣有明顯的結果。

解決這個問題的方法是將你的png嵌套在容器中，然後淡化容器。

完整的答案被Darko Z

來源

2011-07-28 00:15:28 XGreen

在IE8和以下使用jQuery循環透明PNG（24）問題循環

回答

相關問題