在子容器上禁用模糊过滤器答案

【问题标题】：Disable Blur filter on child containers在子容器上禁用模糊过滤器
【发布时间】：2015-06-02 02:49:07
【问题描述】：

所以我正在为网站制作主页/封面，我有一个父容器和一个子容器。

父容器有一个带有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。

【问题讨论】：

没有这样的<background> HTML 标签
没有，它的HTML5，我可以补标签。

标签： css filter

【解决方案1】：

几点说明：

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

考虑到这一点，解决您的问题的方法是创建一个空子 div 并将过滤器应用于同一个空子 div，它的 z-index 必须低于其兄弟姐妹（正如您已经拥有的）

这是一个sn-p：

@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;
}

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

【讨论】：

font-face as 属性是一个错字，我在想什么。我也知道使用-moz-、-o-等...我只是使用-webkit-，因为我使用的是chrome，之后我通常会进行整个浏览器兼容性阶段。
这帮助您解决了问题？
今晚试一试，我一整天都无法在网站上工作。