[jQuery] Przeźroczystość tylko tła, Mam gotowy skrypt i nie chcę aby tekst był w nim przeźroczysty Opcje

[t3st3r]

Olałem ten skrypt, znalazłem o wiele lepszy http://dev.daledavies.co.uk/easyslides/, ma wszystko czego potrzebowałem i do tego nie ładuje wszystkich obrazków na raz.
Można uznać że problem rozwiązany.
----------------------------------------------------------------------
Mam gotowy skrypt i nie chcę aby tekst był w nim przeźroczysty, tylko tło ma mieć efekt przeźroczystości. Jak to zmodyfikować?

[HTML] pobierz, plaintext 
<div id="top-right">
			<div id="slider">
				<a href="#" class="show">
					<img src="img/img-01.jpg" width="720" height="200" alt="tekst tekst tekst" />
				</a>
				<a href="#">
					<img src="img/img-02.jpg" width="720" height="200" alt="tekst tekst tekst" />
				</a>
				<a href="#">
					<img src="img/img-03.jpg" width="720" height="200" alt="tekst tekst tekst" />
				</a>
				<a href="#">
					<img src="img/img-04.jpg" width="720" height="200" alt="tekst tekst tekst" />
				</a>
				<div class="caption"><div class="content"></div></div>
			</div>
		</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.clear {
	clear: both;
}
#top-right #slider {
	position: relative;
	height: 200px;
}
#top-right #slider a {
	float: left;
	position: absolute;
}
#top-right #slider a img {
	border: none;
}
#top-right #slider a.show {
	z-index: 500;
}
#top-right #slider .caption {
	z-index: 600;
	background-color: #000;
	color: #ffffff;
	height: 65px;
	width: 100%;
	position: absolute;
	bottom: 0;
}
#top-right #slider .caption .content {
	margin: 5px;
}
#top-right #slider .caption .content h3 {
	margin: 0;
	padding: 0;
	color: #1DCCEF;
}
[CSS] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {		
			slideShow();
		});
 
function slideShow() {
 
	//Set the opacity of all images to 0
	$('#top-right #slider a').css({opacity: 0.0});
 
	//Get the first image and display it (set it to full opacity)
	$('#top-right #slider a:first').css({opacity: 1.0});
 
	//Set the caption background to semi-transparent
	$('#top-right #slider .caption').css({opacity: 0.7});
 
	//Resize the width of the caption according to the image width
	$('#top-right #slider .caption').css({width: $('#top-right #slider a').find('img').css('width')});
 
	//Get the caption of the first image from REL attribute and display it
	$('#top-right #slider .content').html($('#top-right #slider a:first').find('img').attr('alt'))
	.animate({opacity: 0.7}, 400);
 
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',4000);
 
}
 
function gallery() {
 
	//if no IMGs have the show class, grab the first image
	var current = ($('#top-right #slider a.show')?  $('#top-right #slider a.show') : $('#top-right #slider a:first'));
 
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#top-right #slider a:first') :current.next()) : $('#top-right #slider a:first'));	
 
	//Get next image caption
	var caption = next.find('img').attr('alt');	
 
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
 
	//Set the opacity to 0 and height to 1px
	$('#top-right #slider .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
 
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#top-right #slider .caption').animate({opacity: 0.7},100 ).animate({height: '65px'},500 );
 
	//Display the content
	$('#top-right #slider .content').html(caption);
 
 
}
[JAVASCRIPT] pobierz, plaintext 

Próbowałem w html'u zrobić tak

[HTML] pobierz, plaintext 
<div class="caption"></div>
<div class="content"></div>
[HTML] pobierz, plaintext 

Poprzestawiałem trochę w css, żeby #content był na wierzchu (z-index), ale pozostał problem ze skryptem, nie znam się na JS/jQuery więc w tym aspekcie nic nie modyfikowałem, tekst z #content się zmieniał (i nie był przeźroczysty) ale z animacji nici.
Może coś z RGBA, tyle że nie wiem jak wstawić to zamiast opacity.
------------------------------------------------------------------------------
Już wiem jak wstawić RGBA (IMG:style_emoticons/default/smile.gif) wystarczyło wartość zamieścić w apostrofach.

[JAVASCRIPT] pobierz, plaintext 
background: 'rgba(0,0,0,0.5)'
[JAVASCRIPT] pobierz, plaintext 

------------------------------------------------------------------------------
Jednak nie do końca problem rozwiązany: IE8 i starsze nie obsługują RGBA, próbowałem zastąpić to półprzeźroczystym tłem png, ale widocznie nie działa to z .animate(), bo pierwszy slajd jest ok ale reszta już tła nie posiada.

Ten post edytował t3st3r 25.03.2011, 22:20:32