Question

所以我正在开发一个网站的主页/封面页面，我有一个父容器和一个子容器。

父容器的背景图片带有blur(10px)过滤器，但过滤器也适用于子容器，这是我不想要的。

我已尝试过其他类似问题的解决方案，但没有人帮助过，或者我可能做得不对。

我尝试将子容器设置为z-index: 9999，将父容器设置为z-index: 0。我还发现了另一个可行的解决方案，因为我们有相同的设置，但它很混乱。

解决方案是添加这行代码background > :not(header) { webkit-filter: blur(10px); }。 background是父，header是孩子。（导航也不会模糊，但我想先让一个元素工作）。

我甚至尝试将容器的位置从absolute更改为relative，反之亦然。

这是我的html文件（css和html在同一个文件中）。

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "Candy";
    src: url('font/Candy.otf') format("opentype");
}
@font-face {
    font-family: "DancingScript";
    src: url('font/DancingScript.ttf') format("truetype");
}
body {
    margin: 0;
    padding: 0;
}
background {
    position: absolute;
    background: url("images/cover_page.jpg") no-repeat;
    -webkit-filter: blur(10px);
    display: block;
    height: 100%;
    width: 100%;
    z-index: 0;
}
background > :not(header) {
    -webkit-filter: blur(10px);
}
header {
    font-face: "Candy";
    font-size: 150px;
    text-align: center;
    color: #FFF;
}
nav {
    color: #FFF;
    font-face: "DancingScript";
    font-size: 25px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav li {
    display: inline-block;
}
header, nav {
    display: block;
    position: relative;
    z-index: 9999;
}
</style>
<title></title>
</head>
<body>
<background>
    <header>Rustic Rentals</header>
    <nav>
       <ul>
            <li>Rentals</li>
            <li>Sales</li>
            <li>Contact</li>
        </ul>
    </nav>
</background>
</body>
</html>

结果可见here。

Answer 1

一些注意事项：

没有background HTML标记，
当您申请filters时，请记住不要只使用-webkit-
没有font-face属性来声明您使用的字体，而应使用font-family

考虑到这一点，针对您的问题的解决方案是创建一个空的孩子div并将过滤器应用于相同的空div，其必须比其兄弟姐妹z-index更低（{1}}你已经有了）

这是一个片段：

＆＃13;

@font-face {
  font-family: "Candy";
  src: url('font/Candy.otf') format("opentype");
}
@font-face {
  font-family: "DancingScript";
  src: url('font/DancingScript.ttf') format("truetype");
}
body {
  margin: 0;
  padding: 0;
}
div {
  position: absolute;
  background: url("http://rusticrentals.oldtreasuresfurniture.com/images/cover_page.jpg") no-repeat;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 0;
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);}

header {
  font-family: "Candy";
  font-size: 150px;
  text-align: center;
  color: #FFF;
}
nav {
  color: #FFF;
  font-family: "DancingScript";
  font-size: 25px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
header,
nav {
  display: block;
  position: relative;
  z-index: 9999;
}

＆＃13;

<main>
  <div></div>
  <header>Rustic Rentals</header>
  <nav>
    <ul>
      <li>Rentals</li>
      <li>Sales</li>
      <li>Contact</li>
    </ul>
  </nav>
</main>

＆＃13;

禁用子容器上的模糊过滤器

1 个答案: