【发布时间】：2017-08-24 14:53:44
【问题描述】：
在我的网站上，我有一个图像模糊的 div，我希望此图像在悬停时逐渐模糊（使用transition-property 和transition-duration）。我准备了两个不同版本的图像，模糊和不模糊。问题是，在线（即使我有光纤）和我的计算机上，在转换发生之前有一个快速的白色闪烁。
为什么会这样，我该如何解决？
【问题讨论】：
-
请发布您的代码。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请参阅：如何创建minimal reproducible example
-
@narfi 您添加了哪些 css 代码使您的图像变得模糊，请添加您的代码。
-
您不能将 1 个图像动画化到另一个图像。为了动画模糊，您必须使用未模糊的图像并使用 CSS 属性来模糊图像并在悬停时为 css 属性设置动画
-
CSS 中的 blur 属性也会使文本模糊，并且与我的想法不完全一致。这是我的代码的样子：
.pros { background-image:url('../img/equipe_2016.png'); display:block; width:100%; height:500px; background-repeat:no-repeat; -webkit-transition: all 0.50s ease-in-out; -moz-transition: all 0.50s ease-in-out; -ms-transition: all 0.50s ease-in-out; -o-transition: all 0.50s ease-in-out; }和.pros:hover { background-image: url('../img/equipe_2016-nb.jpg'); }，equipe_2016.png 是模糊图像，equipe_2016-nb.jpg 不是 -
@narfi 将您的代码放在您的问题中......请不要放在 cmets 部分。请参阅here 以获取您可以设置动画的 CSS 属性列表。请注意，
background-image不是其中之一。在 CSS 中，不可能将 1 个静态图像动画化到另一个。