IE8 及以下使用 jQuery 循环的透明 PNG (24) 问题

Question

I'm using jQuery cycle to fade my slideshow in / out.

My slides have a background, and their are semi-transparent PNG's (using tag) within my slides. While the slide is fading in, the semi-transparent areas have black splotches. These splotches disappear after the slide has fully faded in.

I've gotten around this sort of thing using using AlphaImageLoader within the CSS, but these cannot be background images.

Any thoughts? If needed, I can setup a demo.

Thanks in advance for any help!

I've simplified it and uploaded an example here:

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
    });

Answer 1

What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.

The way to get around this is to nest your png inside a container and then fade the container.

Full answer was given by Darko Z