如何模糊懸停的背景圖像，但不是文字

Question

你好，我剛開始網頁開發，我堅持試圖模糊懸停的div背景圖像，但不影響文本。

正如你所看到的，我有一個名爲c1的id，並且我使用了一個javascript函數來顯示懸停時的文本，這非常有效。

現在我想用css/javascript來模糊背景圖片而不會使文本模糊。這可能嗎？

我的CSS：

#c1 { 
    float: left; 
    width: 300px; 
    padding: 30px; 
    margin: 15px; 
    background-image: url(images/cd.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    border-radius: 20px; 
    height: 150px; 
} 

#c1:hover { 
    -webkit-filter: blur(5px); 
} 

我的HTML：

<div id="productos"> 
    <a name="jproductos"></a> 
    <ul> 
     <div id="c1"> 
     </div> 
    </ul> 
</div> 

Answer 1

你必須以不同的方式組織你的HTML。如果你做一個相對容器和圖像將作爲從文本單獨的div：

<div class="container"> 
    <div class="image"></div> 
    <div class="text">Text</div> 
</div> 

.container{ 
    position: relative; 
} 

.image, .text{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.image{ 
    -webkit-filter: blur(5px); 
} 

這樣的文字和圖片都沒有父/子/相同的元素，你可以只模糊圖像，但仍讓文字看起來好像在圖像上

Answer 2

#c1 { 
position:relative; 
float: left; 
width: 300px; 
padding: 30px; 
margin: 15px; 
border-radius: 20px; 
height: 150px; 
overflow:hidden; 
} 

#c1:after{ 
content:''; 
display:block; 
position:absolute; 
z-index:-1; 
top:0; 
left:0; 
bottom:0; 
right:0; 
background: url(images/cd.png) no-repeat center; 
background-size: cover; 
} 

#c1:hover:after{ 
-webkit-filter: blur(5px); 
}