代码之家 › 专栏 › 技术社区 › AlphaX

如何交换透明背景图像

background-image background css

AlphaX · 技术社区 · 6 年前

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

<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>

有什么简单的解决方法吗?

非常感谢

大卫

1 回复 | 直到 6 年前

Temani Afif 6 年前

您需要针对span add use !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>

推荐文章

Nora PÄ« · 统一问题在2d精灵后面排序立方体

1 年前

Codename K · VB6-如何使窗体排在第二位?

6 年前

Tobias von Falkenhayn · 如何为无休止的滚动回收视图绘制背景

6 年前

uzi_no_uzi · 如何修复背景位置的错误?

6 年前

EagerToLearn · .Net控制台应用程序在后台运行

6 年前

Eric Chong · Swift中所有视图控制器的背景图像相同

6 年前

Zhihar · css:带背景的选项卡样式边框

6 年前

Amine Messaoudi · icepdfcore使JFrame在后台保持打开状态

6 年前

Lukasz · WORDPRESS-不需要的HTML按钮背景色

6 年前

Jorge · div上的方形图案作为背景(使用纯CSS)

6 年前