悬停时的背景图像和颜色变化

Question

欢迎。 我试图在悬停时添加背景图像上的颜色一段时间。我已经添加了颜色掩码，但我的动画时间有问题。任何人都可以告诉我为什么过渡时间在这里不起作用吗？

小提琴：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

似乎是由您使用多个背景引起的。您是否考虑过使用伪元素？他们会提供更清晰的标记，并允许您快速选择它。

注意

除非您正在寻找support really old browsers

，否则

前缀转换不再是真正需要的

这是一个快速演示：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;