i want change body opacity 0.5 except focused area selected 'dd'. in backbone coffeescript;
i tried , searched examples; body changing not 'dd'.
my code is:
@$el selected dd ... showhide:-> $('body').css({opacity:0.5}); @$el.css({opacity:1}); ...
what you're trying won't work. if have @ opacity specs we'll see why not:
3.2. transparency: ‘opacity’ property
opacity can thought of postprocessing operation. conceptually, after element (including descendants) rendered rgba offscreen image, opacity setting specifies how blend offscreen rendering current composite rendering.
[...]
if object container element, effect if contents of container element blended against current background using mask value of each pixel of mask<alphavalue>.
so if set opacity of <body> 0.5, browser render of <body> (including children , including @$el) , composite onto browser window alpha channel value of 0.5. result whole page rendered @ half transparency. altering opacity of inside <body> won't matter child's opacity applied while child being rendered <body> , <body>'s opacity applied after that.
consider pure html/css example:
<div id="outer"> <div id="inner"></div> </div> and
#outer { /* ... */ opacity: 0.5; } #inner { /* ... */ opacity: 1.0; } the whole thing come out looking half transparent because #inner opacity "the opacity respect parent" not "the opacity respect browser window".
demo: http://jsfiddle.net/ambiguous/wtavx/
you're going have change approach. example, position opacity: 0.5 element between @$el , <body> structure this:
<div id="outer"></div> <div id="inner"></div> and:
#outer { /* ... */ position: absolute; top: 0; left: 0; opacity: 0.5; } #inner { /* ... */ position: absolute; top: 50px; left: 50px; opacity: 1.0; /* don't need */ } demo: http://jsfiddle.net/ambiguous/jsd7q/
you'll have play stacking order , insert absolutely positioned <div> opacity: 0.5 between element , <body> can't more give scant details in question.
Comments
Post a Comment