社交媒体图标透明度问题答案

【问题标题】：Social media Icons transparency issue社交媒体图标透明度问题
【发布时间】：2017-11-02 06:59:11
【问题描述】：

嘿，我的网页上有一些社交媒体图标，我希望它默认具有白色边框、透明背景和白色徽标。然后在悬停时有那个开关，所以你会得到一个白色的边框、白色的背景和透明的标志。但似乎由于徽标在悬停时是透明的，所以你看到的只是一个白色圆圈。我怎样才能使透明徽标（即 facebook 中的 f）仍然可以在悬停时查看。This page has what I'm going for（向下滚动到底部）我已经包含了到目前为止我所拥有的 jsfiddle。

https://jsfiddle.net/p0sjxqht/

HTML：

<h2>Style Social Media Buttons</h2>


<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>

CSS：

body{
background-color: #333;

}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
background: white;
color:transparent;
}

.fa {
border:solid;
border-width:3px;
border-color:white;
background: transparent;
color: white;
}

【问题讨论】：

在链接站点上，图标在鼠标悬停时变为黑色，不透明。可以试试吗？
示例网站上的徽标在悬停时不是“透明”的，它们只是在悬停时定义了一个黑色的color，以补充背景中的内容。

标签： html css

【解决方案1】：

使用与背景颜色相同的颜色：

.fa:hover {
    background: white;
    color: #333;
}

【讨论】：

在我的实际网页中，有一张图片作为背景而不是纯色，那么我该如何让它发挥作用呢？
我认为你在寻找这种悬停时的效果：nimbupani.com/… 问题是你不能在链接组件中使用它，因为你将背景颜色设置为白色，所以应用于文本的任何透明度都将显示白色背景。

【解决方案2】：

只需添加继承自父节点的颜色

.fa:hover {
    background: white;
    color:inherit;
}

最后添加父 div 颜色作为页面背景是

【讨论】：

在我的实际页面中，我有一个图像作为背景，所以这不会锻炼。我该怎么办？
没关系，按你的意愿设置父颜色:)
我应该在哪里设置父颜色？我的意思是父母是什么，因为这不是嵌套的？对不起，我很新
在你的例子中，父母是身体标签:) 抱歉回复晚了