如何模糊背景而不是它下面的div？

在CSS中使用滤镜：blur（）函数时遇到问题。首先，它不会出现，其次它会模糊整个DIV。如何模糊背景而不是它下面的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>

来源

2015-10-17 lol5433

与源代码段是对我们没用，放在你所使用的测试图像的一些绝对路径没有图像。 – Wobbles

现在编辑@Wobbles – lol5433

模糊滤镜适用于整个元素（包括内部的所有元素）。您需要一个单独的元素，其中只包含您想要用作背景的图像，并将模糊滤镜应用于该图像。 – Ryan

放置在一个单独的层化身避免模糊，那么使用的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>

来源

2015-10-17 14:08:35 Wobbles

如何模糊背景而不是它下面的div？

回答

相关问题