如何在悬停时模糊背景图像而不是文本

Question

您好，我刚开始 Web 开发，我一直在尝试模糊悬停时 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);
}