Question

我正在使用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
    });

Answer 1

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

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

Darko Z

给出了完整答案

使用jQuery Cycle在IE8及更低版本中发出透明PNG（24）问题

1 个答案: