jquery - 是否可以将模糊滤镜应用于位置为 :fixed, 的 div 的背景图像，而另一个 div 在它上面呈现？

Question

我的问题与建议的重复问题有何不同:

我想要只有 div.background-pic 的一部分(带有背景图片的 div)在 div.lower 后面(具有半透明蓝色的 div)，只是显得模糊。

解释:

如您所见，div.background-pic是position:fixed (这意味着它不在流程中，并且不滚动)，而页面的其余部分垂直滚动，这意味着 div.background-pic 有不同的部分。在div.lower后面在不同的时间(当页面正在滚动时)。

所以很明显，我们不想对图像本身做任何事情，而是在 div.lower 上做一些事情(如果有的话，应用某种过滤器，等等)。这样它会导致 的一部分 background-image它后面的 div，看起来很模糊。

---

问题:

JSFiddle

在下面的SSCCE中，我想要的是(background-image的).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>

注意:首选 CSS 解决方案。

---

Answer 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。