CSS，在悬停时添加额外的背景

【问题标题】：CSS, Adding additional background on hoverCSS，在悬停时添加额外的背景
【发布时间】：2016-08-12 04:07:16
【问题描述】：

有没有办法在悬停时为 div 添加额外的背景？例如，在已经存在的背景图像上添加不透明度为 50% 的黑色背景。

谢谢。

【问题讨论】：

你能做到没有悬停吗？

【解决方案1】：

如果您发布一些您想要实现的代码会更好，我发布了一个简单的示例。如果它可以帮助您也使用!important 来强制覆盖

div{
    background: yellow;
}
div:hover {
    background:black;
    opacity:0.5;
}

【讨论】：

【解决方案2】：

您可以使用多个背景来做到这一点。覆盖将是一个渐变，您可以使用background-size 隐藏它。悬停时，您可以将background-size 设置为auto，然后会显示叠加层。

.bg {
  width: 300px;
  height: 200px;
  background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(https://picsum.photos/300/200);
  background-size: 0, auto;
}
.bg:hover {
  background-size: auto;
}

&lt;div class="bg"&gt;&lt;/div&gt;

【讨论】：