使用 CSS 更改懸停時透明圖像的顏色
[英]Change color of transparent image on hover using CSS
問題描述
我正在嘗試使用 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;
}
我無法上傳實際圖片，因此我將上傳免版稅圖片。 我想在懸停時將行星塗成紅色或藍色或我想要的任何顏色。 該圖像還充當主頁按鈕。
3 個解決方案
解決方案1
0 已采納 2020-01-14 16:58:50
您可以使用 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
0 2020-01-14 17:00:39
將徽標 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;
}
解決方案3
0 2020-01-14 17:01:35
這可以通過 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 中圖像的透明背景顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.