Question

我试图使用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;
  -webkit-filter: blur(13px);
  -moz-filter: blur(13px);
  -o-filter: blur(13px);
  -ms-filter: blur(13px);
  filter: blur(13px);
}

Answer 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，您可以设置一个名为＆＃34; front-page.php＆＃34;的新文件。在您的模板目录中并在那里编辑它。如果将文件设置为＆＃34;静态＆＃34;则WordPress会自动将此文件识别为您的主页。在你的WordPress管理页面。

来源：Click here

Answer 2

您可以在主页（首页）的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文件中。

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

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

<?php else : ?>

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

<?php endif; ?>

然后，将在主页上将模糊效果重置为0px（无模糊）。有关setting a static page。

的详细信息，请参阅此处

如果您的帖子/文章列表（博客）是首页/首页，请改用is_home()。但是通过它的声音你可以使用静态的首页，来自我收集的。

Answer 3

默认情况下，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);
}

除了主页之外的每个页面的背景都是模糊的

3 个答案: