Question

我正在尝试在我的网站标题上添加淡入淡出效果。现在效果是倒退的。我怎么可能扭转呢？

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

这是我现在的代码：

#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;
}

Answer 1

您可以为li元素添加额外的div，并将其用作动画的背景：http://jsfiddle.net/qoc6bbnm/3/

<li><a href="">Home</a><div class="back"></div></li>

新的css值（删除#header ul li a和#header ul li a：hover）

#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;
}

背景图像上的透明度淡入过渡

1 个答案: