Skip to content Skip to sidebar Skip to footer

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 is my question different from the proposed duplicate: I want only the part of the div.background-pic (the div with the background image) which is behind div.lower (the div with

Solution 1:

There's a way with some js to get this result, using clipping path and some repositioning on scroll. Like 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 be cross-browser but it seems to work on Chrome and Firefox.


Post a Comment for "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?"