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