欢迎。 我试图在悬停时添加背景图像上的颜色一段时间。我已经添加了颜色掩码,但我的动画时间有问题。任何人都可以告诉我为什么过渡时间在这里不起作用吗?
小提琴: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;
}
答案 0 :(得分:0)
似乎是由您使用多个背景引起的。您是否考虑过使用伪元素?他们会提供更清晰的标记,并允许您快速选择它。
注意强>
除非您正在寻找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;
}
&#13;
<div></div>
&#13;