问题：
我如何只模糊背景而不模糊它下面的div？[重复]
齐建白
在CSS中使用filter:blur（）函数时出现问题。首先，它不会出现，其次它会模糊整个DIV。
编辑：现在用图像和其他css编辑，我之前没有包括。
这是我的HTML/CSS：
.user-archive {}
.user {
float: left;
width: 100%;
max-width: 326px;
min-height: 120px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
filter: blur(5px);
}
.user-avatar {
float: left;
width: 90px;
min-height: 90px;
padding-right: 10px;
border-radius: 50%;
margin: 10px 10px 0 15px;
}
.avatar,.featuredpage img,.featuredpost img,.post-image {padding: 4px; background-color: #f7f7f7; border: 1px solid #e6e6e6;}
img.author {
float: left;
margin: 5px 20px 15px 0px;
border-radius: 50%;
}
.avatar, .featuredpage img, .featuredpost img, .post-image {
background-color: none;
border-radius: 50%;
}<div class="user-archive">
<a href="#">
<div class="user" style="background-image:url(http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg);" >
<div class="user-avatar">
<img alt="#" class="avatar avatar-152 photo avatar-default" height="90" src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg">
</div>
</div>
</a>
</div>共有1个答案
穆轶
将化身放置在单独的层中以避免其模糊，然后使用webkit使模糊更兼容浏览器。
.user-archive {}
.user {
float: left;
width: 100%;
max-width: 326px;
min-height: 120px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.user-avatar {
position:absolute;
width: 90px;
min-height: 90px;
padding-right: 10px;
border-radius: 50%;
margin: 10px 10px 0 15px;
top:0px;
left:0px;
}
.avatar,.featuredpage img,.featuredpost img,.post-image {padding: 4px; background-color: #f7f7f7; border: 1px solid #e6e6e6;}
img.author {
float: left;
margin: 5px 20px 15px 0px;
border-radius: 50%;
}
.avatar, .featuredpage img, .featuredpost img, .post-image {
background-color: none;
border-radius: 50%;
}<div class="user-archive">
<a href="#">
<div class="user" style="background-image:url(http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg);" >
</div>
<div class="user-avatar">
<img alt="#" class="avatar avatar-152 photo avatar-default" height="90" src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg">
</div>
</a>
</div>
类似资料：
-
问题内容： 我希望网站上的弹出窗口具有 Vista/7航空玻璃风格的效果，并且它必须是动态的。我很好这不是一个跨浏览器的效果，只要该网站仍然 _适用_于所有现代浏览器。 我的第一次尝试是使用类似 但是，正如我应该预期的那样， 这导致 对话框的 内容 模糊并且背景保持清晰。 有什么方法可以使用CSS来模糊半透明元素的背景而不是其内容？ 问题答案： 由于除FF以外，其他浏览器似乎未广泛支持该属性，因此
-
问题内容： 我正在尝试模糊背景图像，但主要内容也模糊了（） 如何在不模糊内容的情况下模糊背景？ 问题答案： 您可以像这样在模糊元素上方叠加一个元素
-
如果我不想模糊按钮，我需要做什么？
-
我希望对话框下有模糊的屏幕，所以我拍摄活动的“截图”，模糊它，并将其设置为可位图绘制的对话框窗口背景。奇怪的是对话框不再集中在屏幕上，即使调用了setCanceledOnTouchOutside（true），触摸外部对话框也不会关闭它。 问题是：为什么这不起作用？分别如何创建背景模糊的对话框？
-
我做了这个例子。 我试图模糊背景图像，但主要内容也模糊了（
-
我将模糊过滤器应用于包装器div的背景图像。出于某种原因，模糊过滤器也应用于包装器div中的img元素。