Прозрачная проблема PNG (24) в IE8 и ниже с использованием jQuery Cycle - PullRequest
3 голосов
/ 23 июля 2011

Я использую цикл jQuery для затухания ввода / вывода слайд-шоу.

Мои слайды имеют фон, и они являются полупрозрачными PNG (используя тег) внутри моих слайдов. Пока слайд постепенно исчезает, полупрозрачные области имеют черные пятна. Эти пятна исчезают после того, как слайд полностью исчез.

Я сталкивался с подобными вещами, используя AlphaImageLoader в CSS, но это не могут быть фоновые изображения.

Есть мысли? При необходимости я могу настроить демо.

Заранее спасибо за любую помощь!

Я упростил это и загрузил пример здесь:

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

1 Ответ

0 голосов
/ 28 июля 2011

В вашем приложении происходит то, что IE7 применяет альфа-фильтр к вашему PNG, а затем jQuery запрашивает другой альфа-фильтр для затухания. Это имеет видимые результаты, как вы сказали.

Чтобы обойти это, вложите свой png в контейнер, а затем исчезните из контейнера.

Полный ответ дал Darko Z

...