Html 赋予图像不透明度使css中的文本模糊

我有一个图像，在悬停图像时，文本将显示，现在我又给出了一件事，在悬停图像时，背景将模糊，图像应显示，但图像变得不清晰，我的代码如下：

.sip{
z指数：1；
宽度：90%；
保证金：0px自动；
文本转换：大写；
字体大小：15px；
字体大小：粗体；
字母间距：2px；
线高：正常；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1）；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-moz变换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-ms转换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-o型过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
可见性：隐藏；
不透明度：0；
}
.啜一口{
文字装饰：无；
颜色：#046175；
边界：无；
}
.啜一口：悬停{
颜色：#0e93b0；
}
.someby:悬停{
不透明度：0.3；
}
.萨默比：悬停，啜饮{
能见度：可见；
不透明度：1；
}

---

你看起来像这样吗


.sip{
z指数：1；
宽度：90%；
保证金：0px自动；
文本转换：大写；
字体大小：15px；
字体大小：粗体；
字母间距：2px；
线高：正常；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1）；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-moz变换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-ms转换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-o型过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
可见性：隐藏；
不透明度：0；
}
.啜一口{
文字装饰：无；
颜色：#046175；
边界：无；
}
.啜一口：悬停{
颜色：#0e93b0；
}
.萨默比：悬停，啜饮{
能见度：可见；
不透明度：1；
}

你看起来像这样吗


.sip{
z指数：1；
宽度：90%；
保证金：0px自动；
文本转换：大写；
字体大小：15px；
字体大小：粗体；
字母间距：2px；
线高：正常；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1）；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-moz变换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-ms转换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-o型过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
可见性：隐藏；
不透明度：0；
}
.啜一口{
文字装饰：无；
颜色：#046175；
边界：无；
}
.啜一口：悬停{
颜色：#0e93b0；
}
.萨默比：悬停，啜饮{
能见度：可见；
不透明度：1；
}

没有费心阅读您的所有代码，但我想我解决了您在
和使用
背景过滤器之后的问题：


.sip{
z指数：1；
宽度：90%；
保证金：0px自动；
文本转换：大写；
字体大小：15px；
字体大小：粗体；
字母间距：2px；
线高：正常；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1）；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-moz变换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-ms转换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-o型过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
可见性：隐藏；
不透明度：0；
}
.啜一口{
文字装饰：无；
颜色：#046175；
边界：无；
}
.萨默比{
高度：500px；/*仅用于测试*/
宽度：500px；/*仅用于测试*/
背景重复：无重复；/*仅用于测试*/
位置：相对；/*用于后处理*/
列表样式：无；/*删除点*/
}
.啜一口：悬停{
颜色：#0e93b0；
}
/*神奇的东西*/
.someby:hover：：在{
-webkit背景滤镜：模糊（5px）；/*用于Safari 9+、Edge 17+（不是错误）和iOS Safari 9.2+*/
背景滤镜：Chrome 76支持模糊（5px）；/*效果*/
内容：“；
显示：块；
位置：绝对位置；
宽度：100%；高度：100%；
}
.萨默比：悬停，啜饮{
能见度：可见；
不透明度：1；
}

没有费心阅读您的所有代码，但我想我解决了您在
和使用
背景过滤器之后的问题：


.sip{
z指数：1；
宽度：90%；
保证金：0px自动；
文本转换：大写；
字体大小：15px；
字体大小：粗体；
字母间距：2px；
线高：正常；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1）；
-webkit过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-moz变换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-ms转换：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
-o型过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
过渡：不透明度340ms立方贝塞尔（0.42,0,0.585,1.23）；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
可见性：隐藏；
不透明度：0；
}
.啜一口{
文字装饰：无；
颜色：#046175；
B