CSS Sprite background opacity

Hi,

I'm using sprite image to get round corner box by dividing the sprite image in different sections (TopLeft, TopRight, BottomLeft and BottomRight). If I use the entire image (*.png), I'm able to see the transparency but the same is not coming if I use part by part.

HTML Code:

<div id="round">
	<div class="lt">
		<div class="rt">
			<div class="lb">
				<div class="rb">
					<div class="txt"></div>					  
				</div>
			</div>
		</div>
	</div>	
</div>

Code (markup):

CSS code:

#round{ margin:0 0 0 0; padding:0; border:none; width:500px; float:left; position:absolute;}
.lt{ background:url(sprite.png) no-repeat 0 0; padding:0 0 0 15px; margin:0 0 10px 0;}
.rt{ background:url(sprite.png) no-repeat 100% 0; background-color:#FFF;  padding:10px 0 0 0; z-index:2;}
.lb{ background:url(sprite.png) no-repeat 0 100%; background-color:#FFF; padding:0 0 0 20px; margin:15px 0 -10px -15px;}
.rb{ background:url(sprite.png) no-repeat 100% 100%; background-color:#FFF; padding:0 10px 10px 0; margin:0;}

Code (markup):

Could you please let me know how to get opacity for the image. Attaching the sprite image.

 

Your declaring the background-color property on .rt is overwriting .lb and .rb - and on .rt, .lb and .rb the background-color declared would show THROUGH the foreground image. That particular technique is not compatible with transparencies in the first place since it layers the images on top of one-another.

NOT that I'd be using alpha transparency in a design that way... NOT that we can even see your alpha transparency in the attached thumb either. (which seems to save as a broken .png here - lemme guess, CS3?)

Do you have a full example of it in terms of the background you are trying to render this over? I suspect you are either trying to make this more complicated than need be, or you are trying to do something you shouldn't be trying to do in the first place so far as web design is concerned. (in other words something some "artist" drew in photoshop without knowing the first thing about HTML/CSS)

... again why I consider drawing pretty pictures in photoshop before you lay down semantic markup and the layout in CSS a miserable /FAIL/ at design, and why I refuse to EVER use alpha transparency .png in any of my sites. Between the bloated filesizes, layering restrictions and need for scripting assist in IE - it's just NOT worth the headaches.