Html 更改背景图像时白色闪烁

在我的网站上，我有一个带有模糊图像的div，我希望这张图像在悬停时逐渐解除模糊（使用

过渡属性

和

过渡持续时间

）。我准备了两种不同版本的图像，模糊和不模糊。问题是，在线（即使我有光纤）和在我的电脑上，在转换发生之前会有一个快速的白色闪烁。

---

为什么会这样？我如何修复它？

如果您不想使用css模糊图像，可以使用伪元素

：after

来堆叠图像

将未模糊的放置在模糊的上方，使用

不透明度：0

，悬停时，更改为

不透明度：1

---

这样就不会闪烁。

请发布您的代码。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请参阅：如何创建一个@narfi，你添加了什么css代码使你的图像模糊，请添加你的代码。你不能将一个图像动画化为另一个图像。为了给模糊设置动画，你必须使用未模糊的图像，使用CSS属性来模糊图像，并在鼠标悬停时设置CSS属性的动画CSS中的模糊属性也会使文本模糊，这与我的想法完全不同。我的代码是这样的：

.pros{背景图片：url（'../img/equipe_2016.png'））；显示：块；宽度：100%；高度：500px；背景重复：无重复；-webkit过渡：全部0.50秒缓进-缓出；-moz过渡：全部0.50秒缓进-缓出；-ms过渡：全部0.50秒缓进-缓出；-o过渡：全部0.50秒缓进-缓出；}

和

优点：悬停{背景图像：url（'../img/equipe_2016-nb jpg'）}

其中equipe_2016.png为模糊图像，equipe_2016-nb.jpgnot@narfi把你的代码放在你的问题里。。。请不要在评论部分。有关可以设置动画的CSS属性的列表，请参见。请注意，

背景图像

不是其中之一。在CSS中，不可能将一个静态图像动画化为另一个静态图像。您能解释一下我将如何在这里使用它吗？我从未使用过它，也不知道如何在这种情况下使用它。你可以检查这把小提琴：我有一个背景为

的
div
，背景为模糊的伪元素
div:after
，文本为
p
。我很高兴能帮上忙！你可以把它作为你问题的有效答案，这样，如果有人检查你的问题，他就会知道有一个解决方案。