A question about CSS and opacity.

[torndownunit]

I am basing a site on this template: http://www.oswd.org/design/preview/id/3434

As you can see it has a content box on the right that has a transparent effect.

I need to put a photo in that box, but when I do the photo also looks transparent. How would I go about adding the photo without it taking on the transparent effect of the box?

Thanks a lot.

 

[angelwatt]

Using the opacity property will be applied to everything in that element. A newer way is to use background and rgba:

/* Apply black background with half opacity */
background: rgba(0, 0, 0, .5);

The issue with this is that it only works in Firefox, Safari, Chrome?, Opera?, but not in IE7 and below (not sure about IE8). I still use this though because you generally don't lose any functionality on the page, it just doesn't look as great in IE. Also you can first give a regular background definition before the rgba one, and IE will still recognize that to be applied.

An alternative is to have a secondary element that you make the same dimensions and apply the opacity to it and position it underneath your other element using the z-index. It can be troublesome to get just right though in all browsers.

 

[SrWebDeveloper]

I was thinking simply put the photo in it's own div and absolutely position it. It's outside the flow, a different div and no issue with z-index.

 

[geekindisguise]

I agree with SrWebDeveloper
It would be the easiest with its on DIV
Couldn't you also just leave the DIV in that box but on the stylesheet set its transparency to none or 0 or whatever it is.
I have never really done anything with Opacity so I am not so sure.
But I have done lots of CSS stuff.

 

[angelwatt]

Couldn't you also just leave the DIV in that box but on the stylesheet set its transparency to none or 0 or whatever it is.

As I mentioned, opacity affects everything in the element, which is what the OP is trying to avoid.

 

[geekindisguise]

Ohh, I didn't see that. Hmm, well then I guess having the DIV outside of that area then postitioning it would be the only way.
I think.