我正在开发一个网站，我需要将 div 后面的背景调成蓝色，但我找不到使用 CSS 的方法。
我找到了一篇文章，介绍了如何做到这一点，但我无法准确地复制它。
这里是文章：https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
这是我的页面：http://biolinks.redxte.ch/blur
如果有人能告诉我我做错了什么，那就太好了，谢谢。
【问题讨论】：
backdrop-filter: blur(10px);
它会模糊元素后面的区域。
【讨论】：
你离得太近了！
删除.name-container上的position: relative并将其添加到.head
更新：
删除.name-bg，（如有必要，使用display: none），并将.name z-index 更改为1 或更大。然后添加此代码。
.name:after {
content: "";
display: block;
position: absolute;
background-position: center -373px;
left: 0;
right: 0;
top: 0;
bottom: 0;
filter: blur(10px);
border-radius: 8px;
z-index: -1;
}
.head, .name:after {
background-size: 1500px auto; /* Really, this */
background-position: center; /* and this is the only code .head needs */
background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}
注意：不幸的是，由于使用的站点，您必须设置绝对的background-size。此外，随着@media 代码的使用，您需要稍微修改一下代码。
希望对你有帮助！
【讨论】：
.name div 后面的部分。
将模糊过滤器添加到#pp css（.name 类中使用的 img id）并将其从 name-bg 中删除（这会影响整个背景）。这应该对你更好。 10px 可能有点多。我预览了它（见图）
希望对你有帮助
编辑：
仔细查看您的代码（并查看您的评论，澄清了问题）后，您已经将名称容器周围的边距设置为 0 auto，并且 name-bg class 已经被调整大小（它正在通过添加顶部/右侧/底部/左侧坐标来改变）我将顶部/右侧/左侧/底部调整为 2 或 -2（参见小提琴），这减小了背景 div 的大小。我还将定位更改为relative，这样在调整大小时，它仍然会出现在中间。
https://jsfiddle.net/RachGal/rhav95o1/:fiddle
我认为这更接近您正在寻找的内容。
【讨论】：
又一个实现。请注意，缺点是您必须复制文本才能在两个地方获得相同的高度（可能可以使用 JS 或其他东西来做到这一点，以便更简洁）
html：
<div class="outer">
<div class="inner">
<h1>Blurred box</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
</div>
<div class="inner with-text">
<h1>Blurred box</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
</div>
</div>
scss:
@import "compass/css3";
$normal-img: "https://upload.wikimedia.org/wikipedia/commons/8/84/San_Stefano_Grand_Plaza%2C_Alexandria%2C_Egypt.jpg";
.outer{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:url($normal-img);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
.inner {
background-image:url($normal-img);
background-repeat:no-repeat;
@include background-size(cover);
background-attachment: fixed;
filter:blur(6px);
width:500px;
left:-webkit-calc( 50% - 250px );
top:20%;
position:absolute;
@include box-sizing(border-box);
color: transparent;
&.with-text {
color: white;
opacity: .5;
filter: none;
background: grey;
}
}
【讨论】：