在子容器上禁用模糊过滤器 [英] Disable Blur filter on child containers
问题描述
所以我正在网站的主页/封面上工作，我有一个父容器和一个子容器.
So im working on a home page/cover page for a website and i have a parent container and a child container.
父容器的背景图像带有 blur(10px)过滤器，但是该过滤器也应用于子容器，这是我不想要的.
The parent container has a background image with a blur(10px) filter but the filter is also applying to the child container, which is what i dont want.
我已经尝试了其他类似问题的一些解决方案，但没有一个解决方案，否则我可能做错了.
I have tried some solutions from other similar questions but none have helped or i might not be doing it right.
我尝试将子容器设置为 z-index:9999 ，将父容器设置为 z-index:0 .我只是还发现了另一个可行的解决方案，因为我们的设置相同，但令人困惑.
I tried setting the child container with z-index: 9999 and the parent to z-index: 0. I just also found another solution that could work since we had the same setup but its confusing.
解决方案是添加以下代码行 background>:not(header){webkit-filter:blur(10px);} . background 是父级，而 header 是子级.(导航也不会模糊，但我想先让一个元素工作).
The solution was to add this line of code background > :not(header) { webkit-filter: blur(10px); }. background is the parent and header is the child. (nav will also not be blurred but i want to get one element working first).
我什至试图将容器的位置从 absolute 更改为 relative ，反之亦然.
I even tried to change the positions of the containers from absolute to relative and vise versa on each.
这是我的html文件(css和html在同一文件中).
This is my html file (css and html are in same file).
<!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>
可以在此处看到结果.
推荐答案
一些注意事项:
- 没有
backgroundHTML标签， - 在应用
filters时，请记住不仅要使用-webkit- - 没有
font-face属性来声明您使用的字体，相反，您应该使用font-family
- there is no
backgroundHTML tag, - when you are applying
filtersremember to not only use the-webkit- - there is no
font-faceattribute to declare the font you are using, instead you should usefont-family
考虑到这一点，解决您的问题的方法是创建一个空子 div 并将过滤器应用于必须具有较低的同一空然后是其兄弟姐妹(如您所愿) div z-index
With this in mind, a solution for your problem is creating a empty child div and applying the filter to that same empty div which must have a lower z-index then its siblings (as you already had)
这是一个代码段:
@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>这篇关于在子容器上禁用模糊过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
