1

我最近切换到在我的博客中使用Ghost，默认情况下我使用的是Casper主题。我想要做的是模糊site-head header，通过使用 CSS 来设置样式-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;
}
4

0 回答 0