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

Question

欢迎。 我正在尝试在悬停时在背景图像上添加颜色并持续一段时间。我已经添加了颜色 mask ，但我遇到了动画时间问题。谁能告诉我为什么 transition-duration 在这里不起作用？

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

好像是你用了多个背景造成的。您是否考虑过使用伪元素？它们将提供更清晰的标记，并让您能够快速上手。

注意

除非您正在寻找 support really old browsers，否则不再真正需要前缀转换

这是一个快速演示:

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>