Question

我在同一目录中有两个图像。当我尝试使用css将其中一个用作背景图像时，它不会显示，但是当我使用另一个时，它将显示。这到底是怎么回事？

仅供参考，这是我的CSS代码。

这不起作用

a:hover {
    background-image: url("images/menu-ident.png");
    background-size: 110px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: bottom center;
    color: rgba(255, 255, 255, 1);
}

这确实有用

a:hover {
    background-image: url("images/logo.png");
    background-size: 110px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: bottom center;
    color: rgba(255, 255, 255, 1);
}

Answer 1

这当然是行不通的-第二个覆盖了第一个（选择了相同的元素）。如果要在同一元素上具有多个背景图像，请看这里：https://w3schools.com/css/css3_backgrounds.asp

a:hover {
  background-image: url("images/menu-ident.png"), url("images/logo.png");
  background-size: 110px;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: bottom center;
  color: rgba(255, 255, 255, 1);
}

如果您需要两个不同元素的两个不同背景，则需要不同的CSS选择器，例如类或ID：

a.bg-1:hover {
  background-image: url("images/menu-ident.png");
  background-size: 110px;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: bottom center;
  color: rgba(255, 255, 255, 1);
}

a.bg-2:hover {
  background-image: url("images/logo.png");
  background-size: 110px;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: bottom center;
  color: rgba(255, 255, 255, 1);

}

一个背景图片未显示，而另一个背景图片显示

1 个答案: