By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,176 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

Opacity Question

P: 13
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!!
Mar 29 '08 #1
Share this Question
Share on Google+
6 Replies


drhowarddrfine
Expert 5K+
P: 7,435
The problem is that the setting on the parent is inherited by everything else.
Mar 29 '08 #2

P: 13
The problem is that the setting on the parent is inherited by everything else.
Is there a way to stop the inheritance?
Mar 29 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 29 '08 #4

P: 13
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?
Mar 30 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 30 '08 #6

P: 13
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).
Mar 31 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.