在悬停（sass）上覆盖清晰的背景颜色

Question

我有一个带背景图片的div。我希望能够在悬停时设置黑色透明覆盖。我怎样才能做到这一点？

这是我到目前为止所拥有的

div {
  background: url('map-tracks.png');
  background-size: cover;
  transition: background-color 1s;
  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

Answer 1

假设您确实想要查看背景图像，请使用伪元素。

div {
  background: url('http://via.placeholder.com/200x200');
  background-size: cover;
  transition: background-color 1s;
  width: 200px; 
  height: 200px;

}

div:hover:after
{
    background: rgba(0, 0, 0, 0.50);
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
}

<div></div>

Answer 2

使用绝对或相对定位以及正确的黑色 - 半透明样式放置叠加（div或其他）。无论如何，你需要另一个对象用于叠加。