我正在使用jQuery cycle淡入/淡出幻灯片。我的幻灯片有一个背景，幻灯片内有半透明的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
});