Html 背景图像的透明度渐变

我正在尝试在我的网站标题上添加淡入透明效果。现在效果是相反的。我怎么可能逆转它呢

此外，透明度效果应仅在图像上，而不是文本上

这是我现在的代码：

#header ul li a:hover{
   color:#FF4242;
   background: url(http://i.imgur.com/CJub1gt.png?1?7924) no-repeat 0 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  opacity: 0.5;
}

---

可以向li元素添加额外的div，并将其用作动画背景：

---

你不能在背景图像上使用不透明度。@Paulie_D我知道，但我确信有一种解决方法可以实现我想要做的事情，使用不同的方法，你需要使用一个伪元素，将图像正确定位为背景…然后在伪元素上使用不透明度。非常感谢，请问

位置：relative在这里实现？好吧，我总是使用position:relative来表示内部元素position:absolute的元素，但是在这种情况下，如果你愿意，你可以删除它，因为没有左、右、上或下的适当位置。回到我原来的网站上，标题已经在背景中有一个图像了，这会导致您的解决方案不起作用：/i我更新了我的JSFIDLE以向您展示这种情况。。只需删除z索引：-1；from.back并将position:relative和z-index:1添加到元素中，如下所示：
<li><a href="">Home</a><div class="back"></div></li>

#header ul li a:hover{
    color:#FF4242;
}

#header ul li {
    position:relative;
}

#header ul li div.back{
    position:absolute;
    width:100%;
    height:100%;
    z-index:-1;
    color:#FF4242;
    background: url(http://i.imgur.com/CJub1gt.png?1?7924) no-repeat 0 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    opacity: 0
}

#header ul li:hover div.back{
    opacity:1;
}