如何模糊背景而不是它下面的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？

回答

相關問題