jquery - Is it possible to apply a blur filter to a background-image of a div with position:fixed, from another div rendered on top of it? -

-

how question different proposed duplicate:

i want only part of div.background-pic (the div background image) behind div.lower (the div translucent blue color), just appear be blurred.

explained:

as can see, div.background-pic position:fixed (which means out of flow, , not scroll), while rest of page scrolls vertically, implies there different parts of div.background-pic behind div.lower @ different times (while page being scrolled).

so obvious don't want div image itself, (apply kind of filter if there one, etc.) on div.lower such causes part of the background-image of div behind it, appear blurred.

question:

jsfiddle

in following sscce, want part of (background-image of) .background-pic behind .lower (and partially visible because .lower translucent) appear blurred out. possible?

.background-pic {    background-image: url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);    background-size: cover;    position: fixed;    z-index: -1;    height: 400px;    width: 400px;  }  .top-blur {    height: 400px;    width: 400px;    overflow: auto;  }  .upper {    height: 300px;    width: 100%;    background-color: rgba(255, 127, 80, 0.5);  }  .lower {    height: 200px;    width: 100%;    background-color: rgba(0, 255, 255, 0.51);  }
<div class="background-pic">      <div class="top-blur">      <div class="upper"></div>      <div class="lower"></div>    </div>    </div>

note: css solution preferred.

there's way js result, using clipping path , repositioning on scroll. this:

html:

<div class="background-pic-top"></div> <div class="background-pic-bottom"></div> <div class="top-blur" id="scrollingdiv">     <div class="upper">         <svg class="clip-svg" width="400" height="500" style="position: relative">             <defs>                 <clippath id="uppersvg" clippathunits="userspaceonuse">                     <rect x="0" y="0" width="400" height="300" />                 </clippath>             </defs>         </svg>     </div>     <div class="lower">         <svg>             <defs>                 <clippath id="lowersvg" clippathunits="userspaceonuse" width="200" height="200">                     <rect x="0" y="300" width="400" height="200" />                 </clippath>             </defs>         </svg>     </div> </div>

js:

    var elem = document.getelementbyid('scrollingdiv');     var clipup = document.getelementbyid('uppersvg');     var clipdown = document.getelementbyid('lowersvg');      elem.onscroll = function (e) {         clipdown.getelementsbytagname('rect')[0].setattribute('y', 300 - elem.scrolltop);         clipup.getelementsbytagname('rect')[0].setattribute('y', 0 - elem.scrolltop);     }

css:

   body {             margin: 0px;         }         .background-pic-top {             background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);             background-size:cover;             position:fixed;             z-index:-1;             height:400px;             width:400px;             clip-path: url(#uppersvg);             -webkit-clip-path: url(#uppersvg);         }         .background-pic-bottom {             background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);             background-size:cover;             position:fixed;             z-index:-1;             height:400px;             width:400px;             clip-path: url(#lowersvg);             -webkit-clip-path: url(#lowersvg);             -webkit-filter: blur(5px);             filter: blur(5px);         }         .top-blur {             height:400px;             width:400px;             overflow: auto;         }         .upper {             height:300px;             width:100%;             background-color: rgba(255, 127, 80, 0.5);         }         .lower {             top: 200px;             height:200px;             width:100%;             background-color: rgba(0, 255, 255, 0.51);         }

http://jsfiddle.net/4f601tt7/7/

won't cross-browser seems work on chrome , firefox.


Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

-
i install web server database on raspberry pi (little computer). computer has 1gb ram. i want know best combination: linux distribution , web server , dbms run local server multiple users minimal latency, use php on server. , best settings performance , not have bugs (memory usage, disable plugin, disable service, etc)? i thought light debian , lighttpd server , sqlite database. solution? i think lighttpd + sqlite great choice. linux distro, debian @ centos or tiny core linux , although i'm not sure of compatibility pi. obviously, can't go wrong raspbian if want use in production , more stable performance, few more pi's , set them in cluster .
Read more

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -

-
i developing app in xamarin android. have splash screen serialize class , pass mainactivity using intent . when try deserialize in mainactivity error message : "serializationexception unable find constructor use types" serialization : void loaddata() { currency currency = new currency(this); intent = new intent(this, typeof(mainactivity)); intent.putextra("currency", newtonsoft.json.jsonconvert.serializeobject(currency)); startactivity(intent); } deserialization : cur = newtonsoft.json.jsonconvert.deserializeobject<currency> (intent.getstringextra("currency")); // error here class constructor : public currency(context context) { thiscontext = context; } i began experiencing problem after added parameter context context constructor. has caused this? how can solve it? possible serialize/deserialize class has parameters? you need have empty constructor in currency class in order deserialize it. ...
Read more