2017-03-22 14 views
2

私はwordpressを使用してウェブサイトを作ろうとしていますが、私はすべてのページのデフォルトの背景を持っています。ホームページを除くすべてのページの背景はbluredです

ホームページの背景がぼやけてはならず、残りのページはすべて問題ありません。問題は、すべてのページがぼやけて特定のページをぼかすことができないことです。

これはコードです:

.container-centered 
{ 
    position: fixed; 
    left:0; 
    top:0; 
    height:100%; 
    width:100%; 
    background-image: url("http://localhost/wordpress/wp-content/uploads/fundo-home-1920px.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    -webkit-filter: blur(13px); 
    -moz-filter: blur(13px); 
    -o-filter: blur(13px); 
    -ms-filter: blur(13px); 
    filter: blur(13px); 
} 
+0

は、ホームページやぼかし効果からそれを除外するために特定のクラスを追加します。

は、私は個人的にはそれほどのようにフィルタリングしないで使用します。 – shazyriver

+0

このセレクタを使用すると、各ページのすべての.container-centeredセクションがぼやけます。 #page-id .container-centered {...}のように、非ぼかしセクションのプロパティを追加できます。これは、他のすべてのセクションのメインスタイルの後にする必要があります。 –

答えて

0

あなたは、ホームページ(フロントページ)にbodyタグにクラスを追加し、CSSのみで、それはそのクラスを持っていないときには、コンテナをターゲット可能性があります。たとえば...

CSS

.container-centered { 
    position: fixed; 
    left:0; 
    top:0; 
    height:100%; 
    width:100%; 
    background-image: url("http://localhost/wordpress/wp-content/uploads/fundo-home-1920px.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    -webkit-filter: blur(13px); 
    -moz-filter: blur(13px); 
    -o-filter: blur(13px); 
    -ms-filter: blur(13px); 
    filter: blur(13px); 
} 

.container-centered.home-no_blur { 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -o-filter: blur(0px); 
    -ms-filter: blur(0px); 
    filter: blur(0px); 
} 

PHP

bodyタグは、あなたのheader.phpのファイルにこれを追加します。その後、ホームページ上(無ぼかし)を0PXないようにぼかし効果をリセットします

<?php if (is_front_page()) : ?> 

    <body class="<?php body_class('home-no_blur'); ?>"> 

<?php else : ?> 

    <body class="<?php body_class(); ?>"> 

<?php endif; ?> 

setting a static pageの詳細については、これを参照してください。

投稿/記事(ブログ)のリストがホームページの先頭/の場合は、代わりにis_home()を使用してください。しかし、その音によって、私はを集めたものから静的なフロントページ、を使用しています。

+0

は助けてくれてありがとう!!!!私は私に与えたものを使っていくつかの変更を行いました。 –

+0

私は助けることができてうれしい憂慮なし!コーデックスは、より技術的にしたい場合は素晴らしいです。 –

1

はあなたのホームページにあなたのイメージの祖先として、特定のクラスを持っていますか?もしそうなら、あなたは以下を行うことができます:

.container-centered 
{ 
    position: fixed; 
    left:0; 
    top:0; 
    height:100%; 
    width:100%; 
    background-image: url("http://localhost/wordpress/wp-content/uploads/fundo-home-1920px.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    -webkit-filter: blur(13px); 
    -moz-filter: blur(13px); 
    -o-filter: blur(13px); 
    -ms-filter: blur(13px); 
    filter: blur(13px); 
} 

.homepage-class .container-centered 
{ 
    position: fixed; 
    left:0; 
    top:0; 
    height:100%; 
    width:100%; 
    background-image: url("http://localhost/wordpress/wp-content/uploads/fundo-home-1920px.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -o-filter: blur(0px); 
    -ms-filter: blur(0px); 
    filter: blur(0px); 
} 

もしそうでなければ、私はそれをすることをお勧めします。 WordPressでは、テンプレートディレクトリに "front-page.php"という名前の新しいファイルを設定して編集することができます。ワードプレスの管理ページで「静的」に設定されている場合、WordPressは自動的にこのファイルをホームページとして認識します。

出典:Click here

+0

助けてくれてありがとう、あなたはとても役に立ち、素早い対応をしました!! –

+0

あなたは大歓迎です;) –

0

デフォルトでは、WordPressはホームページにホームクラスのボディクラスを与える必要があります。

.container-centered 
{ 
    position: fixed; 
    left:0; 
    top:0; 
    height:100%; 
    width:100%; 
    background-image: url("http://localhost/wordpress/wp-content/uploads/fundo-home-1920px.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
} 
body:not(.home) .container-centered { 
    -webkit-filter: blur(13px); 
    -moz-filter: blur(13px); 
    -o-filter: blur(13px); 
    -ms-filter: blur(13px); 
    filter: blur(13px); 
} 
+0

助けてくれてありがとう! –

関連する問題