如何为图标内部的文字输入颜色

问题描述：

我想问一下，如果我将鼠标悬停在图标上，我是否可以为图标添加颜色？如何为图标内部的文字输入颜色

https://www.google.ch/search?q=linkedin&source=lnms&tbm=isch&sa=X&ved=0ahUKEwilrciPwpPVAhUEWhQKHYX7CxcQ_AUICigB&biw=1920&bih=949#tbm=isch&q=linkedin+black+icon&imgrc=eCztS3qV_QYT9M

比如我怎样才能使颜色仅文本“在”红，如果我在它悬停？我认为你必须与照片编辑器结合使用，但我真的不知道如何。感谢您的帮助

这是我试过的代码。

<section id="icons"> 
    <a href="#"><img src="youtube.png" class="youtube" alt=""></a> 
</section> 


.youtube { 
background-image: url(youtube.png); 
width: 5vw; 
position: absolute; 
} 

.youtube:hover { 
background-image: url(youtubehover.png); 
width: 5vw; 
position: absolute; 
}

请分享一些代码，你已经尝试 – tech2017

与你在这里试图代码中的问题，是“youtubehover.png”不是从某处导入的。您只导入了“youtube.png”。你将需要一个独立的图像导入叫做youtubehover.png，有你想要的不同颜色。否则，我相信这会起作用。很高兴你现在明白了一切。 – Alec

答

我不得不做出使用魔杖与paint.net图标的空白中的文本。我也删除了边缘的白色。用下面的代码，我从文字或从白色到红色的图标内的内容改变了颜色，当我在它悬停

<section id="icons"> 
    <a href="#"><img src="yourimage.png" alt=""></a> 
</section> 


#icons img { 
    width: 5vw; 
    padding: 0; 
} 

#icons img:hover { 
    background-color: red; 
    border-radius: 100%; 
    overflow: hidden; 
}

答

这样做的最好方法是创建两个分开的图像。一个用于当图标处于默认状态时，另一个用于处于悬停状态。在悬停状态下，将颜色更改为任何你喜欢的颜色，例如红色，这样当用户将鼠标放在它上面时，就会看到颜色。

这里是做一些这方面的CSS的例子：

#icon { 
background-image: url(../images/example_default.png) 
width: 150px; 
height: 150px; 
position: absolute; 
} 

#icon: hover { 
background-image: url(../images/example_hover.png) 
width: 150px; 
height: 150px; 
position: absolute; 
cursor: pointer; 
}

：悬停改变什么形象看起来，当用户将鼠标悬停在图标等。注意背景图像是不同的，每个图标可能会有一个状态。我还添加了“光标：指针”，假设这个图标是某种按钮。

使用了你告诉我的代码，但由于某种原因它不起作用。我只是看不到变化和其他彩色图像。我不需要使用z-index，因为如果我将背景图像应用于另一个背景图像，它会落后于旧背景图像。 – lologic

@lologic no：悬停应该照顾所有这一切。尝试删除悬停和冒号之间的空格。更新了我的代码，我错过了一些分号。 – Alec

我找到了解决方案并写了一个答案。我只需要使用另一个程序。谢谢您的帮助 – lologic

答

由于图像是黑色和白色，您可以使用它。

.red:hover { 
 
    filter: contrast(50%) sepia(100%) saturate(100) hue-rotate(-10deg); 
 
}

<img class="red" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png">

答

这里有一个简单的例子： https://jsfiddle.net/oowjwLru/

这可以很容易地通过放置一个彩色格的形象背后，然后用下面简单的jQuery自动隐藏在div完成并在鼠标结束时显示它：

Html：

<img id="imgLogo" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png" alt="icon" height="100" width="100" style="position:absolute:top:-100px;"> 
<div id="divColor" style="background-color:red;width:60px;height:60px;position:absolute;left:30px;top:28px;z-index:-1;"> 
</div>

的Javascript/jQuery的：

$(document).ready(function(){ 
    $("#divColor").hide(); 
    $("#imgLogo").mouseover(function() { 
     $("#divColor").show(); 
    }); 
});

答

您可以使用SVG（与调整没有问题），并在悬停改变填充颜色

HTML：

<svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g> 
    <path d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"/> 
    <path id="linkedin" fill="#000" d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12 c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88 C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078 c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179 c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"/> 
    </g> 
</svg>

的CSS：

svg:hover #linkedin { 
    fill: red; //or #ff0000 
}

在SVG的路径必须有id为“LinkedIn”变色

<path id="linkedin" fill="#000" d="M49.265,[...],10.11V46.304z"/>

如何为图标内部的文字输入颜色

相关推荐