0

I have a page at http://quaaoutlodge.com/content/activities You see that there's that semi transparent div with opacity set to 0.7. Now I would like to override that opacity for the images on this page but I don't seem to be able to create a style with an opacity factor relative to 1.0 being not transparent at all but it is relative to the set 70% oppacity and i seem to only go more transparent but not less... How can I do this?

Thanks!

stdcerr
  • 13,725
  • 25
  • 71
  • 128
  • 2
    Don't think that's possible as long as the image is a child of the semi-transparent div. – moettinger Feb 11 '13 at 22:35
  • possible duplicate of [Create non-transparent div on top of transparent parent element](http://stackoverflow.com/questions/2356711/create-non-transparent-div-on-top-of-transparent-parent-element) – Jon Feb 11 '13 at 22:35

2 Answers2

1

If I'm understanding the question correctly, you can use the rgba style instead of opacity in your CSS.

#contentbg {
    background:rgba(255, 255, 255, 0.7);
}

Just replace the 255 values with the RGB values of what you want your background to be. This way, the background will be transparent but not the images and text.

Kelly Goeken
  • 15
  • 4
  • Yep - this will do exactly what you want for your design. You've used CSS gradients in the panel we're talking about - you can just convert all of the rgb(xxx,yyy,zzz) colors to rgba(xxx,yyy,zzz,0.7), and it should look exactly the same. Be aware though, that some browsers/less powerful machines may struggle to render and scroll smoothly with big areas of transparent gradients over other elements. In your case, using a transparent .png instead may give you better performance. – Ben Hull Feb 12 '13 at 19:56
0

I know this is a workaround but I normally just get on Photoshop and change the opacity for images, sometimes even solid colour.

Ben Hull
  • 7,524
  • 3
  • 36
  • 56
Rahul
  • 11
  • 4