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