Archive for March 6th, 2010

06 Mar 2010 @ 8:08 PM 

Okay so this is very strange. I have a an absolute positioned image and on top of it is a PNG gradiant.

Based on the normal thought and previous post, if i set the absolute – positioned image z-index to -1 and make the layer with the png gradiant set a position: relative then it will happen what it was supposed to happen, the gradiant will cover the image. But what if we have this. see the 2 attached examples

The left image is having this CSS:

 img { z-index: -1; position: absolute;}
container { z-index: 1; position: absolute; background-image: gradiant; border-bottom: 2px solid grey;}

While the right image is having the same but with z-index: 1. If we remove z-index from the image @ all, then it wont show because of the underlying layer (remove the property). But if you look closely, the image is something on WHITE background so even with absolute positioning the only thing i can think off that makes it look like it “Multiplied” like in Photoshop is browsers ability to calculate png transparency and fill-options.

Of maybe i’m just silly and i am missing something very important but so far, and i cant find enough time to test this in a controlled environment, but so far this stuff works and i am quite happy with this situation :)

Later Edit: I’m silly, it was a number of factors, Gradiant transparency still works but only that. So Basically what you read in the last post… damn and i got excited about this :( oh boy.

Posted By: Dinulescu Alexandru Adrian

Last Edit: 06 Mar 2010 @ 08:23 PM

EmailPermalinkComments (0)