模糊<header>背景图片，但不是儿童</header>

Question

我最近切换到使用Ghost作为我的博客，默认情况下我使用的是Casper主题。我要做的是通过使用site-head设置CSS样式来模糊header -webkit-filter: blur，但是当我这样做时，每个其他元素也会变得模糊。

我尝试将自定义样式属性添加到-webkit-filter: blur(0px) !important之类的其他元素，以覆盖site-head模糊，但没有任何变化。我还尝试在header和第一个div的开头之间添加并模糊一个单独的元素，导致其他元素，但结果相同。

我对CSS和Javascript很陌生，不禁想到我只是在这里完全忽略了一些东西。

这是index.hbs：

<header class="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
    <div class="vertical">
        <div class="site-head-content inner">
            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
            <h1 class="blog-title">{{@blog.title}}</h1>
            <h2 class="blog-description">{{@blog.description}}</h2>
        </div>
    </div>
</header>

以下是site-head的样式：

.site-head {
    position: relative;
    display: table;
    width: 100%;
    height: 60%;
    margin-bottom: 5rem;
    text-align: center;
    color: #fff;
    background: #303538 no-repeat center center;
    background-size: cover;
}