如何模糊悬停的背景图像，但不是文字

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); 
}