CSS，在悬停时添加其他背景

Question

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

感谢。

Answer 1

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

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

Answer 2

您可以使用多个背景来执行此操作：

＆＃13;

＆＃13;

.bg {
  width: 592px;
  height: 304px;
  background: url(http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg);
}
.bg:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;