css悬停后台重复不起作用

Question

我已经完成了播放弹出的YouTube视频。现在我在徘徊图像部分挣扎。我需要，当悬停图像时，它应该显示不透明度的播放按钮。

所以我试过了：

.youTubeVideo:hover {
    opacity:0.5;
    background-color:#ffffff;
}
.videoThum:hover{
    background-image:url('playbutton.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

现在，当悬停，不透明度仅起作用时，图像无法显示。但如果我删除不重复，它会显示播放按钮。

Live example on the jsFiddle

Answer 1

将此添加到您的CSS：

Live example with your code.

.videoThum:hover{
    background-image:url('http://www.californiagrinders.com/images/playbutton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
}