如何解决悬停时如何更改不是正方形的img链接的颜色
我是网络开发的新手, 我的目标是:当悬停在社交媒体链接img上时,它应该像普通文本链接一样更改颜色,但是相反,我却获得了在img下指定颜色的框背景,而我的img链接不是框,就像是Twitter Instgram徽标等...,问题,我如何使img自身的颜色变为处于悬停状态的任何人,并且变得像img边框不是圆形或框形,以便于我更好地理解将图片包含在悬停状态下,twitter的img链接默认为黑色。
解决方法
- 我相信您不能使用图片。
- 将其作为SVG包含,并使用CSS填充样式。
示例
svg {
fill: red;
}
svg:hover {
fill: blue;
}
svg[role="img"]{
width:25px;
}
img {
width: 30px;
color: red;
fill:purple;
}
<body>
<svg role="img" fill="purple" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Facebook icon</title>
<path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" />
</svg>
<img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/facebook.svg" />
</body>
从simpleicons.org免费获得SVG中的社交媒体图标
,由于我的声誉,我无法发表评论,因此,除了补充没有人的答案之外,我将创建一个新答案。
像先生一样,没有人说使用svg更容易。
但是如果绝对需要使用图像,则可以将CSS filter
属性与brightness()
或invert()
之类的值一起使用以操纵其颜色。
我喜欢将其与黑色图标一起使用,以将其变成白色。
示例:
<img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/facebook.svg" />
<img src="https://image.flaticon.com/icons/svg/62/62945.svg" />
<img src="https://image.flaticon.com/icons/svg/62/62945.svg" />
<img src="https://bradan.co/wp-content/uploads/2017/05/icon-blue-website-design-development.png" />
img {
width: 40px;
filter: invert(1);
}
body {
background: blue;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。