背景图像和悬停时的颜色随持续时间的变化而变化

Question

欢迎。我正试图在悬停时在背景图像上添加一些持续时间的颜色。我已经添加了彩色遮罩，但我对动画的时间有问题。有人能告诉我为什么过渡期在这里不起作用吗？

Fiddle：https://jsfiddle.net/kamilm14/pysmzryn/

这是我的HTLM代码：

   <table style="width: 510px; border: 0px;">
     <tr>
        <td class="scandic">
        </td>
        <td style="width: 10px; height: 119px;">
        </td>
        <td class="stayinn">
        </td>
     </tr>
   </table>

和CSS：

.scandic {
width: 250px; height: 119px;
    background: url('http://oi61.tinypic.com/2dvlibt.jpg') no-repeat;
    background-size: 250px 119px;
    border: 0;
}
.scandic:hover {
background: linear-gradient(0deg, rgba(0,188,212,0.8), rgba(0,188,212,0.8)), url(http://oi61.tinypic.com/2dvlibt.jpg) no-repeat;
background-size:250px 119px;
}
.stayinn {
width: 250px; height: 119px;
    background-image: url('http://oi58.tinypic.com/35iztsh.jpg');
    background-repeat:no-repeat;background-size:250px 119px;
    border: 0;
}
.stayinn:hover {
background: linear-gradient(0deg, rgba(0,188,212,0.8), rgba(0,188,212,0.8)), url(http://oi58.tinypic.com/35iztsh.jpg) no-repeat;
background-size:250px 119px;
}
.scandic, .stayinn {
     -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
}

Answer 1

似乎是由您使用多个背景引起的。你有没有考虑过使用伪元素？它们将提供一个更干净的标记，并允许您很快学会这一点。

注意

除非您希望支持真正旧的浏览器，否则不需要前缀转换

下面是一个快速演示：

div {
  position: relative;
  /*required*/
  height: 300px;
  width: 300px;
  background:url(http://placekitten.com/g/300/300);
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 200, 200, 0.6);
  opacity: 0;
  transition: all 0.8s;
  /*I've reduced this to a single line (prefixing isn't needed)!*/
}
div:hover:before {
  opacity: 1;
}

<div></div>