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

Posted 2023-05-08

【中文标题】CSS，在悬停时添加额外的背景

【英文标题】：CSS, Adding additional background on hover

【发布时间】：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;

<div class="bg"></div>