所以我的横幅是在.wrapper.style1和我已经使用webkit滤镜模糊的照片，但一切都模糊了导航栏和横幅内的信息。我怎么能解决这个问题，所以只有图像是模糊的?
这是我的CSS的部分:
.wrapper {
padding: 6em 0em 4em 0em;
}
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
-webkit-filter: blur(10px);
background-size: cover;
}
.wrapper.style2 {
background: #f2f2f2;
}
.wrapper.style2 .major {
text-align: left !important;
}
.wrapper.style2 .major h2 {
display: block;
margin-bottom: 0.70em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.8em;
font-weight: 400;
}
.wrapper.style2 .major .byline {
letter-spacing: normal;
line-height: 1.6em;
text-transform: capitalize;
font-size: 1.4em;
}
.wrapper.style2 h3 {
display: block;
margin-bottom: 1em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.6em;
font-weight: 400;
}
.wrapper.style3 {
padding-bottom: 6em;
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style3 .container {
padding-left: 6em;
padding-right: 6em;
}
.wrapper.style3 p {
font-size: 1.6em;
}
.wrapper.style4 {
background: white;
}
.wrapper.style5 {
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style5 .image {
display: block;
width: 60%;
margin: 0em auto 2em auto;
}
.wrapper.style5 .image img {
border-radius: 50%;
border: 10px solid;
border-color: white;
}
这里是一些HTML的副本:
<html>
<head>
<title>NueroEdge | Powered By Anazro</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src="js/footage.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="index.html" img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<!-- Nav -->
<nav id="nav">
<ul>
<img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<li class="active">
<a href="index.html">Home</a>
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</li>
</ul>
<li><a href="https://www.anazro.com/">Anazro Store</a></li>
<li><a href="left-sidebar.html">Application</a></li>
<li>
<a href="">Roster</a>
<ul>
<li><a href="#">Call Of Duty</a></li>
<li><a href="#">Streaming</a></li>
<li><a href="#">Staff</a></li>
</ul>
</li>
<li>
<a href="">More...</a>
<ul>
<!--<li><a href="#">Lorem ipsum dolor</a></li>-->
<li>
<a href="">LeaderBoard</a>
<ul>
<li>
<a href="">Ryan Tarson</a>
<ul>
<li><a href="#"><img src="images/ryantarson.png" alt="TECGaming" style="width:50px;height:50px">Ryan Tarson AKA: TECGaming</a></li>
<li><Strong>Age:</Strong> 17</li>
<li><Strong>Current Favourite Game:</Strong> Grand Theft Auto V PC</li>
<li>I am Ryan Loves video games, computers and coding specifically Java, He plays really all types of</li>
<li>games from a wide range and is willing to play any games from any genre to. He has a great and</li>
<li>fun personality which would keep you hooked on his stream like it was a drug. Ryan is the type</li>
<li>of streamer that is willing to do anything to keep his fans entertained. He has streamed before </li>
<li>but never streamed seriously but planning to do so. I am the website Programmer as well!</li>
<li>Click the links below and become apart of my life!</li>
<div class="row double">
<li><a href="https://twitter.com/TECGaming360" class="button">Twitter</a></li>
<li><a href="https://www.youtube.com/user/TECGaming360" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Kavin I.</a>
<ul>
<li><a href="#"><img src="images/profile.jpeg" alt="NueroEdge" style="width:50px;height:50px">Kavin I. AKA: KaVn Ne</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> Advanced Warefare</li>
<li>Kavin I. AKA KaVn Ne is Co-Founder along Side Ryan Tarson, Kavin loves video games</li>
<li>mostly Call of Duty because that’s all he ever plays. He mostly plays all he</li>
<li>ever plays. He mostly plays competitively and will stream singles matches or just</li>
<li>random hangouts with fans but he would play other games if Call of Duty is down</li>
<li> or someone requests something different. Kavin loves computers and any type of</li>
<li>electronics for some odd reason. Kavin has a unique personality and which could</li>
<li>make you become addicted to watching him play video games BEWARE!</li>
<div class="row double">
<li><a href="https://twitter.com/KaVn_Ne" class="button">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UC6RGgeacGovnYZko5ZFAZjg" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Nick Marchitelli</a>
<ul>
<li><a href="#"><img src="images/Praise.jpg" alt="Praise" style="width:50px;height:50px">Nick Marchitelli AKA: Praise</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player and Captain for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the supportive role on the team and also calls most of the shots and plays since he</li>
<li>is captain but everyone has their time to shine if no plays aren’t working.</li>
<li>Hybrid player AR and SMG role.</li>
<li>Currently in 16th place In North America for win on GameBattles</li>
<li>Been Playing Competitive Since COD Ghost</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/Praise_Ne" class="button">Twitter</a></li>
<li><a href="umggaming.com/livid-praise " class="button">UMG Gaming</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Luke Pondillo</a>
<ul>
<li><a href="#"><img src="images/profile.jpeg" alt="nueroedge" style="width:50px;height:50px">Luke Pondillo AKA: Flusso</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Objective role on the team he nice on the sticks with his spot on AR skills but</li>
<li>also can use a SMG, which makes him a hybrid player. The kind of player who can step up when </li>
<li>the team needs it.</li>
<li>Been Playing Competitive Since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/FlussoNe" class="button">Twitter</a></li>
<li><a href="#" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Joseph Balasico</a>
<ul>
<li><a href="#"><img src="images/palm.jpeg" alt="palm" style="width:50px;height:50px">Joseph Balasico AKA: Palm</a></li>
<li><Strong>Age:</Strong> 15</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Slayer role on the team he is known to be getting 30+ kills in every respawn</li>
<li>and He is a hybrid player where he can use an AR and a SMG. His slaying skill itself helps guide </li>
<li>his team to victory.</li>
<li>Like to use an AR and SMG which makes him a Hybrid Player</li>
<li>Been Playing Competitive COD since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/LiviD_Palm" class="button">Twitter</a></li>
<li><a href="#" class="button">YouTube</a></li>
</div>
</li>
</ul>
</li>
</ul>
<!--<li><a href="#">Veroeros feugiat</a></li>-->
</ul>
</li>
</nav>
</div>
</div>
<!-- Banner -->
<<div id="banner">
<section class="container">
<h2>NueroEdge</h2>
<span>NueroEdge Outstanding performance at MLG Event</span>
<p>Looking for more fantastic players for our team!</P>
<a href="application.html" class="button alt">Sign Up</a>
</section>
</div>
</div>
我以前用几个不同的解决方案做过几次。我发现最有用的是使用::before选择器。您将继承您指定的每个背景属性并应用过滤器。
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
background-size: cover;
}
.wrapper.style1::before {
content = "";
background: inherit;
background-size: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(10px);
}
遗憾的是，模糊不会留下尖锐的边缘，所以你可能需要放大一点来掩盖它。
您不能对容器div应用过滤器。为此，您可以使用标签调用图像或为图像使用不同的容器div。
如何应用CSS 3模糊滤镜到背景图像