在 IE8 及以下使用 jQuery Cycle 的透明 PNG (24) 问题答案

【问题标题】：Transparent PNG (24) issue in IE8 and below using jQuery Cycle在 IE8 及以下使用 jQuery Cycle 的透明 PNG (24) 问题
【发布时间】：2011-07-23 00:58:11
【问题描述】：

我正在使用 jQuery 循环来淡入/淡出幻灯片。

我的幻灯片有背景，它们在我的幻灯片中是半透明的 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
    });

【问题讨论】：

IE8 及更早版本的透明度支持非常差。 JQuery 为您提供了一些工具，使您可以更轻松地在 IE 中使用透明度和淡化效果，但它并没有修复错误。 :-(

标签： jquery internet-explorer png cycle alpha-transparency

【解决方案1】：

您的应用程序中发生的情况是 IE7 正在将 alpha 过滤器应用于您的 PNG，然后 jQuery 要求您为淡化应用另一个 alpha 过滤器。正如你所说，这有明显的结果。

解决这个问题的方法是将你的 png 嵌套在一个容器中，然后淡化容器。

Darko Z给出了完整答案

【讨论】：