Opacity Question

[VinniemacND]

I have a div in which I have given opacity so that the background shows through. This works fine, except that the background also shows through the pictures. Is there a way to make it so that the pictures are not given this opacity?

Here is the webpage. http://seniordesign.ee.nd.edu/2007/Design%20Teams/Lightning%20Riders/team.html

Thanks!!

[drhowarddrfine]

The problem is that the setting on the parent is inherited by everything else.

[VinniemacND]

The problem is that the setting on the parent is inherited by everything else.

Is there a way to stop the inheritance?

[drhowarddrfine]

Please do not double post.

Somehow I cut off my own post above. You can't turn inheritance off so you'll have to move those images outside of the transparent divs. Or perhaps use positioning to slide a background behind the images.

[VinniemacND]

Please do not double post.

Somehow I cut off my own post above. You can't turn inheritance off so you'll have to move those images outside of the transparent divs. Or perhaps use positioning to slide a background behind the images.

Absolute positioning is out of the question, because I have my page centered, so the position of everything depends on the size of the viewer's browser window.

You mentioned moving images outside of the transparent divs; how can I do this while still keeping the pictures in their respective locations on the page?

[drhowarddrfine]

Opacity is actually post-processed, meaning all this blending is done after the elements are already placed, so the only way to fix this is to remove those images from that div. Of course, that requires some thought.

My idea of using positioning does not necessarily mean absolute positioning, though it might. If the containing element is relative, then the abs pos element will remain within that container.

Another thought is what would happen if the image was z-index'ed so it's at a different level compared to the background.

I'm just throwing out ideas without thinking them through.

[VinniemacND]

Opacity is actually post-processed, meaning all this blending is done after the elements are already placed, so the only way to fix this is to remove those images from that div. Of course, that requires some thought.

My idea of using positioning does not necessarily mean absolute positioning, though it might. If the containing element is relative, then the abs pos element will remain within that container.

Another thought is what would happen if the image was z-index'ed so it's at a different level compared to the background.

I'm just throwing out ideas without thinking them through.

I appreciate your feedback. Thanks for your ideas.

I fooled around with the z-index; I can get the images to no longer have the transparency, but then the images are stuck between the background and the div in which I wanted them to appear; in other words, I was unable to modify the z index effectively without making the image disappear behind the parent div.

I also attempted to move the images out of the parent div, and use positioning, but I had the same problem described above (when modifying the z-index).