I need to overlay few background images, of two different divs, I am using transparent PNGs but when I overlay one over the other the second adds some annoying white background over the first and the effect is lost. I have read somewhere that this might be due to the alpha channel, but did not have any info for the walkthrough. Could someone point me to a solution ?
Please Note I am using a sprite and take both images from there, jQuery is included as well (so I will accept JS or jQuery solution), I need to use a transparent images, cannot use opaque, cannot combine the images. I currently I am using z-index: 1;
for the bottom layer and z-index:2;
for the top, probably will have a third one so the solution should not be centered over overlaying two images, but to overlay 2+ images.
Thanks!
Added a fiddle with comment in the JS section
A screenshot of the result notice the white between the leafs in the left upper corner and it is supposed to be a 35px square containing a little dirt
Solution:
By using CSS and adding background-color: transparent;
I have removed the background color of the divs and obtained full transperancy
A div
is not necessarily transparent by default. It inherits the background of it's parent. Which is most likely white, and not transparent..
Try:
<div style="background-color: rgba(255, 0, 0, 0.5)">.........</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.