我正在尝试使用 CSS 将 Logo 图像(透明 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;
}
我无法上传实际图片，所以我将上传一张免版税图片。我想在悬停时将行星涂成红色或蓝色或任何我想要的颜色。该图像还用作主页按钮。
最佳答案
您可以使用 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 - 使用CSS在悬停时更改透明图像的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59738157/