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

您将背景图片加载到css中，为什么要在jquery中使用img标签

$(".site-header .site-header-bottom img").css({..})

尝试一下：

<style type="text/css">
    .site-header{
        width: 100%;
        height: 1500px;
    }
    .site-header .site-header-bottom {
        width: 100%;
        height: 100px;
        background-image: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
        background-repeat: no-repeat;
        background-size: auto;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var pxlCount = 0
        $(window).on('scroll', function () {
            pxlCount = $(document).scrollTop()/50;
            $(".site-header .site-header-bottom").css({"-webkit-filter": "blur("+pxlCount+"px)","-moz-filter": "blur("+pxlCount+"px)","filter": "blur("+pxlCount+"px)" })     
        });
    });
</script>
<div class="site-header">
    <h1>This is the title.</h1>
    <p>This is the text.</p>
    <div class="site-header-bottom"></div>
</div>

Answer 2

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

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

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

笔的简化HTML：

JVM_OPTS=" \
    -XX:+UseG1GC \
    -XX:+PerfDisableSharedMem \
    -XX:+ParallelRefProcEnabled \
    -XX:G1HeapRegionSize=8m \
    -XX:MaxGCPauseMillis=250 \
    -XX:InitiatingHeapOccupancyPercent=75 \
    -XX:+UseLargePages \
    -XX:+AggressiveOpts \
    "

简化的CSS：

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

jQuery模糊代码会影响整个块

2 个答案: