What Greg has mentioned is absolutely true.
But I think the better / easier approach to solve this issue must be
something like this :
$(document).ready(function(){
$('.work').css('opacity', '0.6').children().css('opacity', '1');
//I am actually not very sure about the above code, if that doesn't
work this should :
$('.work').css('opacity', 0.6').children().each(function(){
$(this).css('opacity', '1'); });
}
Thanks & Regards,
Dhruva Sagar.
On Mon, Dec 7, 2009 at 8:50 AM, Greg Tarnoff <greg.tarn...@gmail.com> wrote:
>
> The problem is in the way browsers render opacity. The spec reads that
> only the element and not children should have the reduced opacity,
> however none of the browsers have implemented this at last check
> (maybe safari 4+).
>
> Your best bet is to apply a background image with the designated
> opacity as a PNG. This will keep everything at 100% opacity but still
> resemble the look you are after.
>
> Another option is to not have .work wrap the other objects and use
> relative positioning to move them in place. Then you use your current
> css but it doesn't affect the items you want because they aren't
> children of .work.
> On Dec 6, 9:00 pm, Many <martin.clav...@gmail.com> wrote:
> > Hey,
> >
> > <div class="work">
> > <div class="title">DEMO</div>
> > <div class="logo"><img src="images/demo.jpg" /></div>
> > </div>
> >
> > I want to set opacity to ".work" , it works fine if i do $(".work").css
> > ("opacity","0.6"); but, i don't want the class title and logo have
> > this opacity, how can i fix it?
> >
> > Thanks for reading!!
>
