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

【问题标题】：Change color of transparent image on hover using CSS使用 CSS 更改悬停时透明图像的颜色
【发布时间】：2020-01-15 01:01:35
【问题描述】：

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

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

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

【问题讨论】：

您无法使用 css 更改图像的颜色。但是，您可以在悬停时直接更改源，也可以使用图像的 svg 版本，然后使用 css 更改 fill 颜色。你可以看到更多here for the first method和here for the second one。

标签： html css image hover transparent

【解决方案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;
}

【讨论】：

这种方法很有效，对我来说最简单的方法，我的经验有限，谢谢！

【解决方案2】：

这可以通过 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>

【讨论】：

【解决方案3】：

将标志 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;
}

【讨论】：