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

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/ or try

过渡：全 1 缓入缓出；

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

How to make background image on hover have a transition effect without default background image?

css

css-transitions