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

2024-06-02 • 问答

我正在尝试使用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

您可以使用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;
}

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

使用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更改悬停时透明图像的颜色

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

大家都在问