如何使悬停时的背景图像在没有默认背景图像的情况下具有过渡效果

Question

所以我在一个没有默认背景图像的<a>上进行过渡效果，所以当我试图将鼠标悬停在它上面时，过渡效果不起作用。我怀疑，如果没有默认的背景图像，它将无法工作。那么，在不使用javascript的情况下，我如何实现我的目标或其他选择呢？这是我的代码：

    <nav>
      <li><a href="products.html">Products</a></li>
    </na>

这是我的css：

    .nav>li>a { font-size:17px;  color:#929799; padding:45px 25px 35px 25px;
        -webkit-transition: background-image 1s ease-in-out;
        -moz-transition: background-image 1s ease-in-out;
        -o-transition: background-image 1s ease-in-out;
        transition: background-image 1s ease-in-out;
    }
    .nav>li>a:hover, .nav>li>a:focus{ 
      background:url(http://cdn.myld.com.au/2/1198/web_total-gardens_9a0e4cf244.png) no-repeat top center; color:#38c867; }

Answer 1

background-image是一个不可设置动画的属性。不能应用转换。

我假设你想在悬停时淡入图像（？）。一种伪造它的方法是将背景图像应用于伪元素并转换不透明度：

body {
  padding-top: 50px;
}
nav>ul>li>a {
  font-size: 17px;
  color: #929799;
  padding: 45px 25px 35px 25px;
  position: relative;
}
nav>ul>li>a>span {
  position: relative;
}
nav>ul>li>a:before {
  content: "";
  background: url(http://placehold.it/200x100) no-repeat top center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
nav>ul>li>a:hover:before,
nav>ul>li>a:focus:before {
  opacity: 1;
}

<nav>
  <ul>
    <li><a href="products.html"><span>Products</span></a></li>
  </ul>
</nav>

正如@GabyakaG.Petrioli在评论中提到的，您的选择器是错误的，您有无效的HTML。两者在上面的示例中都是固定的

Answer 2

css过渡不透明度允许图像在指定的持续时间内更改值，动画属性更改

http://css3.bradshawenterprises.com/cfimg/或者尝试

转换：所有1轻松输入输出；