使用 CSS 更改悬停时透明图像的颜色

Question

我正在尝试使用 CSS 将徽标图像（透明 png）从白色更改为红色。我不知道任何 JS，只知道 html 和 CSS.

我试过使用 css 带颜色的悬停，但它不起作用。我使用了 background-color，效果很好，但我不希望图像的背景是红色的。我已经搜索过了，但我认为我的搜索描述不是很好。

这是html:

<body>
<div class="background-container">
<header>


<a href="index.html"><img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo"></a>

<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
    </ul>
</nav>
</header>

和 css:

    .logo {
     height: 30vh;
     margin: 1em;


     }

     .logo:hover {
     color: red;
     }

我无法上传实际图片，所以我将上传免版税图片。我想在悬停时将行星涂成红色或蓝色或任何我想要的颜色。该图像还用作主页按钮。

transparent image

Answer 1

您可以使用 javascript 或者如果您只想使用 css，请按照以下步骤操作：

为悬停状态添加新的彩色图像：

<a href="index.html">
   <img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo">
   <img src="images/redImage.png" class="logo-hover">
</a>

将这些样式应用于 CSS:

A .logo {
   height: 30vh;
   margin: 1em;
   display: block;
}

A:hover .logo {
   display: none;
}

A .logo-hover {
   display:none;
}

A:hover .logo-hover {
   display:block;
}

Answer 2

将徽标 html 更改为

<a class="logo" href="index.html">
  <img src="images/ReLiveLogoWHITE TRANSPARENT.png" alt="">
</a>

然后使用这个css

.logo {
  display: inline-block;
  text-decoration: none;
  background-color: transparent;
  height: 30vh;
  margin: 1em;
}
.logo:hover {
  background-color: red;
  text-decoration: none;
  cursor: pointer;
}
.logo img {
  border: 0;
}

Answer 3

这可以通过 CSS 过滤器实现，但它们的确切数字需要反复试验。

body {
  background: lightblue;
}

div {
  display: inline-block;
  width: 20vw;
  margin: 2vh;
}

img {
  max-height: 100%;
  width: 100%;
  display: block
}

img:hover {
  filter: invert(50%) sepia(100%) hue-rotate(290deg) saturate(500%);
}

<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/clipart365150.png" alt="">
</div>

使用 CSS 更改悬停时透明图像的颜色

Change color of transparent image on hover using CSS

html

css

image

transparent

hover