Css 在子容器上禁用模糊过滤器_Css_Filter

Css 在子容器上禁用模糊过滤器

css filter

Css 在子容器上禁用模糊过滤器,css,filter,Css,Filter,所以我在为一个网站做主页/封面，我有一个父容器和一个子容器父容器有一个带有模糊（10px）过滤器的背景图像，但过滤器也应用于子容器，这是我不想要的我尝试过其他类似问题的一些解决方案，但都没有效果，或者我可能做得不对我尝试将子容器设置为z-index:9999，将父容器设置为z-index:0。我还找到了另一个可行的解决方案，因为我们有相同的设置，但很混乱解决方案是添加这行代码background>：not（header）{webkit filter:blur（10px）；}backgro

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

父容器有一个带有

模糊（10px）

过滤器的背景图像，但过滤器也应用于子容器，这是我不想要的

我尝试过其他类似问题的一些解决方案，但都没有效果，或者我可能做得不对

我尝试将子容器设置为

z-index:9999

，将父容器设置为

z-index:0

。我还找到了另一个可行的解决方案，因为我们有相同的设置，但很混乱

解决方案是添加这行代码

background>：not（header）{webkit filter:blur（10px）；}

background

是父项，

header

是子项。（导航也不会模糊，但我想先让一个元素工作）

我甚至尝试将容器的位置从

绝对

更改为

相对

，反之亦然

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


@字体{
字体系列：“糖果”；
src:url（'font/Candy.otf'）格式（“opentype”）；
}
@字体{
字体系列：“DancingScript”；
src:url（'font/DancingScript.ttf'）格式（“truetype”）；
}
身体{
保证金：0；
填充：0；
}
背景{
位置：绝对位置；
背景：url（“images/cover_page.jpg”）不重复；
-webkit过滤器：模糊（10px）；
显示：块；
身高：100%；
宽度：100%；
z指数：0；
}
背景>：非（标题）{
-webkit过滤器：模糊（10px）；
}
标题{
字体：“糖果”；
字体大小：150px；
文本对齐：居中；
颜色：#FFF；
}
导航{
颜色：#FFF；
字体：“DancingScript”；
字体大小：25px；
}
导航ul{
列表样式：无；
保证金：0；
填充：0；
}
李海军{
显示：内联块；
}
导航头{
显示：块；
位置：相对位置；
z指数：9999；
}
乡村租金

租金
销售
接触

可以看到结果。

一些注意事项：

没有
```
background
```
HTML标记
应用
```
过滤器时
```
请记住不要只使用
```
-webkit-
```
没有
```
font-face
```
属性来声明您正在使用的字体，您应该使用
```
font-family
```

考虑到这一点，您的问题的解决方案是创建一个空的子

div

，并将筛选器应用于同一个空

div

，该子项的

z索引必须低于它的同级（正如您已经做过的那样）
以下是一个片段：

@font-face{
字体系列：“糖果”；
src:url（'font/Candy.otf'）格式（“opentype”）；
}
@字体{
字体系列：“DancingScript”；
src:url（'font/DancingScript.ttf'）格式（“truetype”）；
}
身体{
保证金：0；
填充：0；
}
div{
位置：绝对位置；
背景：url（“http://rusticrentals.oldtreasuresfurniture.com/images/cover_page.jpg）无重复；
显示：块；
身高：100%；
宽度：100%；
z指数：0；
-moz滤波器：模糊（10px）；
-o-滤波器：模糊（10px）；
-ms过滤器：模糊（10px）；
过滤器：模糊（10px）；}
标题{
字体系列：“糖果”；
字体大小：150px；
文本对齐：居中；
颜色：#FFF；
}
导航{
颜色：#FFF；
字体系列：“DancingScript”；
字体大小：25px；
}
导航ul{
列表样式：无；
保证金：0；
填充：0；
}
李海军{
显示：内联块；
}
标题，
导航{
显示：块；
位置：相对位置；
z指数：9999；
}

乡村租金

租金
销售
接触

没有这样的
HTML标记不，没有，它的HTML5，我可以组成标记。font-face
as属性是一个输入错误，我知道我在想什么。我还知道如何使用-moz-
，-o-
，等等。。。自从我使用chrome之后，我就一直在使用-webkit-，之后我通常会做整个浏览器兼容性阶段。这帮你解决了问题？今晚我会试试，我一整天都没能在网站上工作。
<!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>