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

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

Answer 2

你必须以不同的方式构建你的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);
}

这样，文字和图片不是父/子/同一元素，你只能模糊图像，但仍然会让文字看起来像是在图像上

如何在悬停但不是文本上模糊背景图像

2 个答案: