如何交换透明背景图片

Question

我有一个带有透明背景图像的跨度：

<span style="background: url(icon1.png) no-repeat left center;"></span>

悬停时我希望背景图像发生变化，为此我创建了悬停效果：

.style1:hover {
  background: url(icon2.png);
  background-repeat: no-repeat;
}

它的工作方式是将新图片叠加在上面，但由于它是透明的，您仍然可以看到下面的旧图片。

.style1:hover {
  background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/3777-200.png);
  background-repeat: no-repeat;
  background-size: 25px;
}

<div class="style1">
    <span style=" background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/66460-200.png) no-repeat left center;background-size:25px 25px;padding-left: 50px;"></span>
  </div>

有什么简单的解决办法吗？

非常感谢

大卫

Answer 1

您需要针对跨度添加使用 !important 来覆盖内联样式。

.style1:hover span {
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/3777-200.png)!important;
  background-repeat: no-repeat;
  background-size: 25px;
}

<div class="style1">
  <span style=" background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/66460-200.png) no-repeat left center;background-size:25px 25px;padding-left: 50px;"></span>
</div>

如何交换透明背景图片

how to exchange transparent background image

css

background

background-image