Jquery CSS3背景图像是否在图像上淡入淡出？

我正试图在css3中重新创建页面底部3个图像悬停效果的功能，这只是一个个人项目

我想这是在jquery中完成的，但据我所知，css3也可以吗

基本上，我想把鼠标悬停在一张图片上，让背景图片逐渐淡入视野，而不是第一张图片

有人知道怎么做吗？我整个上午都被卡住了

谢谢你的帮助：）

#导航{
边际：0px；
填充：0px；
}
#导航img{
显示：块；
利润率：0.5px；
填充顶部：50px；
填充底部：50px；
右边填充：50px；
左侧填充：50px；
背景：url(http://imgur.com/vErJT32，DQWhz1e#1）无重复中心顶部；
-moz边界半径：10px；
-webkit边界半径：10px；
-o-边界半径：10px；
边界半径：10px；
-webkit过渡：背景0.5s线性；
-moz过渡：背景0.5s线性；
-o-过渡：背景0.5s线性；
过渡：背景0.5s线性；
}
#导航图像：悬停{
背景：url(http://imgur.com/vErJT32，DQWhz1e#1）无重复中心顶部；
背景：rgba（100125175,0）；
}

这里有很多错误：）

和not

属性

url

在此无效

淡入

img

以显示

background

只需使用CSS transition+opacity即可

---

CSS是可能的，但使用绝对定位的元素，或者，在本例中；伪元素

HTML

.nav {
  background: url(http://lorempixel.com/200/200/city) no-repeat;
}
.nav img {
  opacity:1;
  transition:0.5s;
}
.nav:hover img {
  opacity:0;
}

---

}

使用CSS无法影响背景图像的不透明度。是否可以说在其上有另一个在悬停时褪色为0%不透明度的背景实心层？否则可以使用位置设置背景动画，但褪色需要堆叠容器。这些可以是img、带背景的标记或伪元素。更复杂一点：）假衰落背景的例子

<div class="nav">
   <img src="http://lorempixel.com/200/200/nature">
 </div>

.nav {
  background: url(http://lorempixel.com/200/200/city) no-repeat;
}
.nav img {
  opacity:1;
  transition:0.5s;
}
.nav:hover img {
  opacity:0;
}

<div class="nav">    </div>

.nav {
    margin: 0px;
    padding: 0px;
    width:480px;
    height:200px;
    position: relative;
    border:1px solid grey;
}

.nav:before {
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(http://i.imgur.com/vErJT32.jpg) no-repeat center top;
    opacity:0;
    transition:opacity .5s ease;
}


.nav:hover:before {
    opacity:1;