如何在悬停状态下使用不透明度和背景图像设置背景颜色？答案

【问题标题】：How to set background color with opacity and background image in hover state?如何在悬停状态下使用不透明度和背景图像设置背景颜色？
【发布时间】：2015-01-27 19:40:38
【问题描述】：

我已经创建了使用 jquery 播放 youtube 视频的弹出窗口。

HTML：

<div class="wrap">
    <div class="col-3">
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
            </div>
</div>

这是我的 jsfiddle：http://jsfiddle.net/h5x0c0qr/

当我悬停该图像时，它会显示不透明的播放图标和背景颜色吗？

我需要显示，当处于悬停状态时，需要显示背景颜色：粉红色，不透明，还带有播放图标。

我无法设置背景颜色。谁能帮帮我？

提前致谢。

【问题讨论】：

可能重复：Issues in image opacity in hover state
停止一遍又一遍地重新发布相同的问题。
super.. 但我只是很困惑.. 我想，在悬停状态下添加背景颜色.. 但你做了 .videoThum { background-color:rgb(240, 14, 238);显示：内联块； }.. 我想 .videoThum:hover... 你能解释一下吗？
CSS: set background image with opacity?的可能重复

标签： html css

【解决方案1】：

见 js 小提琴：http://jsfiddle.net/h5x0c0qr/2/

并添加这个 css：

.videoThum:hover {
    background-color: pink;
    background-image: url("http://www.californiagrinders.com/images/playbutton.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 209px;
    opacity: 0.9;
    width: 252px;
    z-index: 5;
}

【讨论】：

为什么要添加宽度和高度？
不使用宽高可以吗？

【解决方案2】：

为什么不直接添加background-color 属性？

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

【讨论】：

【解决方案3】：

之所以不能添加背景色是因为这里的代码：

.overlaybg {
background: #000;
display: none;
height: 100%;
opacity: 0.7;
position: fixed;
width: 100%;
z-index: 6;
}

您在 "NONE" 上有显示，并且因为它是您尝试重新编码的 div 的父级，所以没有显示效果。

建议你去掉"display: none;"

干杯

【讨论】：