Question

我有一个onepager-scrolldown网站，其中包含全屏标题图片，后跟几个部分。现在，我决定将背景图像应用到某些部分。为了弄清楚我有什么结构，这里有一个简单的代码示例，标题后跟一个部分：

HTML：

<body>

    <header></header>

    <section class="bg-test">
        <div class="container">
            <div class="row">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>
    </section>

</body>

CSS：

html,
body {
  height: 100%;
  width: 100%;
}
header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center top;
  background-image: url('../img/header.jpg');
}
.bg-test {
   background-image: url('../img/header.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

现在我想将截面属性（例如模糊滤镜）添加到截面的背景图像中（显然只对图像而不是图像前面的文本）。为了达到这个目的，我尝试按照本主题中的方法进行操作：

How to apply a CSS3 Blur Filter to a background image

我尝试将代码示例调整到我的情况（只有部分而不是整页），但无法使其工作。我相信这是由于与固定标题图像的交互。

有人会这么善良并帮助我吗？谢谢！

Answer 1

您可以在:before上添加背景，并将其放在内容后面：

.bg-test {
   position:relative;
   background:none;
}
.bg-test:before {
   content:"";
   display:block;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   z-index:-1;

   /* Add Blur */
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);

   /* Background */
   background-image: url('../img/header.jpg');
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
  -o-background-size: cover;
}

将滤镜应用于截面背景图像

1 个答案: