Можно ли применить фильтр размытия к фоновому изображению div с позицией: исправлено, из другого div, вынесенного поверх него?

Как мой вопрос отличается от предлагаемого дубликата:

Я хочу только часть div.background-pic (div с фоновым изображением), которая находится за div.lower (div с полупрозрачным синим цветом), чтобы просто выглядеть размытым.

Разъяснения:

Как вы можете видеть, div.background-pic - это position:fixed (что означает, что он вышел из потока и не прокручивается), в то время как остальная часть страницы прокручивается вертикально, что означает, что существуют разные части div.background-pic за div.lower в разное время (пока страница прокручивается).

Итак, очевидно, что мы не хотим ничего делать с div с самим изображением, но делаем что-то (применяем какой-то фильтр, если он есть и т.д.) на div.lower, так что он вызывает часть background-image div, которая находится за ней, должна выглядеть размытой.

Вопрос:

JSFiddle

В следующем SSCCE мне нужна часть (background-image of) .background-pic, которая находится за .lower (и частично видима, потому что .lower является полупрозрачной), чтобы выглядеть размытой. Возможно ли это?

.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>

ОТВЕТЫ

Ответ 1

Есть способ с некоторым js получить этот результат, используя clipping path и некоторое перемещение по прокрутке. Вот так:

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/

Не будет кросс-браузера, но он работает на Chrome и Firefox.