是否可以将模糊滤镜应用于div的背景图像，其位置为：fixed，来自其上方的另一个div？

Question

我的问题与建议的副本有何不同：

我只想 div.background-pic（带有背景图片的div）的一部分，它位于div.lower（具有半透明蓝色的div）后面，< em>似乎模糊。

说明：

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

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

问题：

JSFiddle

在接下来的SSCCE中，我希望background-image的{​​{1}}部分位于.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);
}

注意：首选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。