jquery - jQuery 模糊代码影响整个 block

Question

我正在尝试自定义我的 wordpress 主题。我想要一个具有固定背景的视差标题，并且我希望它随着人们向上滚动网页而变得模糊。这是我的标题的 CSS 代码:

/*HEADER PARALLAX*/
.site-header .site-header-bottom {
    background-image: url("../bg.jpg");
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto; 
}

所以我将这个函数添加到主题的 javascript 部分:

function blurHeader(){
    var pxlCount = 0
    $(window).on('scroll', function () {
        pxlCount = $(document).scrollTop()/50;
        $(".site-header .site-header-bottom img")
            .css({
                "-webkit-filter": "blur("+pxlCount+"px)",
                "-moz-filter": "blur("+pxlCount+"px)",
                "filter": "blur("+pxlCount+"px)" 
            })     
    });
}

但它会影响标题上的所有内容(包括标题和描述)。我希望它只模糊背景。它在移动版本上的表现也很奇怪。谁能帮我？谢谢

Answer 1

您的想法是正确的，但正如评论中指出的那样，当您使用 filter:blur 时，它会模糊元素的内容以及背景。

这是一种使用绝对定位的方法:

https://codepen.io/anon/pen/wxeRrM

笔下的简化 HTML:

<div class="site-header">
    <div class="site-header-content">Content here</div>
    <div class="site-header-bottom"></div>
</div>

简化的 CSS:

.site-header {
  height: 500px; /* Make sure to set a height */
  overflow: hidden;
  position: relative;
  width: 100%;
}

.site-header-content {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.site-header-bottom {
  background: url('https://placeimg.com/640/480/any'); /* Your image */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: auto;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}