所以我正在创建一个网站，我希望元素的背景模糊，而我不希望元素中的文本变得模糊，就像现在一样。有没有办法做到这一点，而不必使用已经完成所有事情的图像？ - 对于SEO
您可以在下面的代码段中看到我当前的一些代码：
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
height: 100%;
margin: 0;
padding: 0;
background: url('http://www.crossroadsaugusta.org/wp-content/uploads/2016/02/1418-56c10c706fcbb.jpg') fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
main {
width: 800px;
margin: auto;
}
#welcome {
color: #fff;
width: 580px;
margin: 100px auto;
font-size: 110%;
border-radius: 25px;
border: #fff solid 1px;
margin-top: 50px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index: 1;
position: relative;
}
#welcome p {
z-index: 999;
margin: 10px;
}<body>
<main role="main">
<header id="welcome">
<p>Content in here</p>
</header>
</main>
</body>更新
好吧，我自己解决了这个问题！也许我的问题不够清楚。
我想将父项模糊为一个段落（在本例中为标题标记），而不会模糊带有段落的文本。因此模糊的父母（标题）背后的所有元素也会变得模糊 - 在这种情况下是背景图像。我想出了如何自己完成这项工作，请参阅下面的代码段：
重要提示：背景图像必须是模糊元素的最近父项（此处主体是标题的父项），否则模糊效果将不起作用。
body {
background: url('https://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg') fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
header {
border-radius: 25px;
position: relative;
margin: 100px auto;
width: 500px;
background: inherit;
overflow: hidden;
}
header::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
header h1, p {
margin: 20px 10px;
color: #fff;
position: relative;
z-index: 1;
}<body>
<header>
<h1>
Whoo it's working!
</h1>
<p>this is also blurring the background</p>
</header>
</body>filter像opacity一样影响元素和任何孩子。因此，使用::before伪元素并将模糊应用于此。
html,
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .1);
height: 100%;
margin: 0;
padding: 0;
background: url('http://www.crossroadsaugusta.org/wp-content/uploads/2016/02/1418-56c10c706fcbb.jpg') fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
main {
width: 800px;
margin: auto;
}
article {
color: #fff;
width: 580px;
margin: 100px auto;
}
#welcome {
font-size: 110%;
border-radius: 25px;
border: #fff solid 1px;
margin-top: 50px;
position: relative;
}
#welcome::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .2);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
#welcome p {
z-index: 999;
margin: 10px;
}<main role="main">
<article>
<section id="welcome">
<p>Content in here</p>
</section>
</article>
</main>不确定您是否了解背景滤镜，但它允许您将效果应用于div背后的任何内容，并且他们正在努力添加对Chrome和Firefox的支持，但目前仅支持Safari。无论如何，这是代码，因为我不确定何时会支持它。
#welcome {
font-size: 110%;
border-radius: 25px;
border: #fff solid 1px;
margin-top: 50px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
-o-backdrop-filter: blur(5px);
-ms-backdrop-filter: blur(5px);
-moz-backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
将div放在您想要模糊效果的位置，并将filter:blur添加到div类。
.class {
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(#blur);
filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10'
}
请参阅演示here
Filters是css3级别的属性，仅适用于现代浏览器。
.class{
background: rgb(0,0,0) // fallback for ie8 and lower end browser
background: rgba(0,0,0,0.5) //0.5 is the opacity value
}
这是解决问题的正确方法，但您必须使用rgb值而不是十六进制代码。