使用 CSS 更改悬停时透明图像的颜色
[英]Change color of transparent image on hover using CSS
问题描述
I am trying to change the a logo image (transparent png) from white to red with CSS.
我正在尝试使用 CSS 将徽标图像（透明 png）从白色更改为红色。 I do not know any JS, only html and CSS.我不知道任何 JS，只有 html 和 CSS。
I have tried using css hover with color but it doesn't work.我曾尝试使用带有颜色的 css 悬停，但它不起作用。 I used background-color, which works, but I don't want the background of the image to be red.我使用了 background-color ，它有效，但我不希望图像的背景是红色的。 I've searched but I don't think my search description is very good.我已经搜索过，但我认为我的搜索描述不是很好。
This is the html:这是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>
and the css:和CSS：
.logo {
height: 30vh;
margin: 1em;
}
.logo:hover {
color: red;
}
I can't upload the actual image so I'll upload a royalty free image.我无法上传实际图片，因此我将上传免版税图片。 I want to color the planet red or blue or whichever color I want, on hover.我想在悬停时将行星涂成红色或蓝色或我想要的任何颜色。 The image also acts as the home button.该图像还充当主页按钮。
3 个解决方案
解决方案1
0 已采纳 2020-01-14 16:58:50
You could do that using javascript or if you just want use css follow the steps as follow:您可以使用 javascript 来做到这一点，或者如果您只想使用 css，请按照以下步骤操作：
Add the new coloured image for the hover state:为悬停状态添加新的彩色图像：
<a href="index.html">
<img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo">
<img src="images/redImage.png" class="logo-hover">
</a>
Apply those styles to the CSS:将这些样式应用到 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
0 2020-01-14 17:00:39
Change the logo html to将徽标 html 更改为
<a class="logo" href="index.html">
<img src="images/ReLiveLogoWHITE TRANSPARENT.png" alt="">
</a>
and then use this css然后使用这个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;
}
解决方案3
0 2020-01-14 17:01:35
This is possible with CSS filters buut they exact numbers will require some trial and error.这可以通过 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.