Html css悬停背景重复不起作用

我已经完成了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; 
}

现在，当悬停时，不透明度只起作用，图像并没有显示。但如果我删除“不重复”，它将显示“播放”按钮

将此添加到CSS中：

---

你没有添加

背景大小

属性，它正在处理小提琴。请尝试此小提琴：@jigneshkhokariya:对于我来说，仅处理不透明度，图像没有显示，但在你的小提琴中处理得很好。你试过我的小提琴示例吗？请把你更新的css代码放进去。这样我才能弄清楚。是的，

div

和

背景图像的大小不同。但是代码是正确的！查看有关
背景大小
属性的更多信息。您在哪个div中说的？框中的照片具有
300x300px
和悬停图像
450x400px
图像如果您悬停这些图像，它将变形。悬停图像的大小或速率必须相同。代码是正确的，图像是坏的！
.videoThum:hover{
    background-image:url('http://www.californiagrinders.com/images/playbutton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
}