在背景图像悬停时缓出缓和答案

【问题标题】：Ease in ease out on background image hover在背景图像悬停时缓出缓和
【发布时间】：2015-08-19 11:00:09
【问题描述】：

我在让背景图像悬停在有边框的链接上轻松进出效果时遇到问题，老实说，我什至不知道该使用哪个。图像要么随着过渡而移动，要么什么都不做。任何帮助都会很棒。谢谢！

.cta { margin: 0; padding: 1.4em 0 1.4em 0; cursor:pointer; display:block; text-align:center; width:100%; font-size:  2.3em !important; color:#FFF !important; font-weight: 700; font-style: italic; text-transform: uppercase; border: 0; background-image: url(http://i.imgur.com/BaLv0X5.jpg);  background-repeat:no-repeat; background-position:center center;}
.cta:hover { text-decoration:none; border: 0; opacity:0.8; }
a.cta  {border-bottom: none !important; text-decoration: none;}
.cta span {border: #fff 3px solid; padding: 0.3em;}
.cta span:hover {background-image: url(http://i.imgur.com/mrbBt4f.jpg); background-repeat:no-repeat; background-position:center center; }

<a class="cta" href="learn-more" title="Understand your data today!">
<p><span>Understand your data today!</span></p>
</a>

【问题讨论】：

标签： html css hover background-image transition

【解决方案1】：

@mia-sno 是正确的，您不能转换背景图像。如果您想在悬停时始终更改图像，我会更改：

.cta span:hover

到

.cta:hover span

由于您的 codepen 中没有任何转换，我会接受 @divy3993 的建议并使用该 css。如果您想将图像从模糊转换为焦点，则需要重新构建 html 并使图像脱离背景。有几种方法可以做到这一点，但我希望这会有所帮助。

【讨论】：

【解决方案2】：

我猜 CSS 过渡会起作用。

将以下 CSS 代码添加到您的类 .cta 和 .cta span

CSS

 -webkit-transition: all 0.3s ease-in-out; 
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

DEMO

【讨论】：

这是我们想要的吗？认为他们只想通过过渡而不是动画位置来更改图像？
@MiaSno，我认为是这样，因为问题本身说“在背景图像悬停时轻松放松”。让我们看看康普顿是否觉得它有帮助。
@Compton，这有帮助吗？
我已经尝试过上述方法，但这不是我想要的。就像 MiaSno 说的那样，我想在悬停时使用过渡来更改图像。
好的，所以你想在那个特定的矩形框或整个页面上进行更改？

【解决方案3】：

不幸的是，过渡不适用于背景图像。您可以检查 css 规格 - 您可以使用背景颜色，但不能使用图像。您必须尝试使用图像和 jquery 的解决方案。

【讨论】：