可隐藏的图像

Question

我有一个场景，其中我有一个带有图片和一些模糊的团队页面。在每张图片下，我都有社交媒体链接，如下所示：

使用以下基本标记，这些图像位于每个项目下方的水平列表中。

<ul>
    <li>
        <a><img src=""/></a>
    </li>
    <li>
        <a><img src=""/></a>
    </li>
</ul>

目前这些是图像，但我非常希望如果这些图像的灰色内容变成蓝色。

我在考虑像这样的背景图片：

<a><span class="linkedin"></span></a>

.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}

.linkedin:hover{
    height:28px;
    width:auto;
    background-image:url(link/to/the/linkedin/picture-blue-version)
    }

然而，当我尝试这个时，空间是空的而不是拍摄图像的大小。

如果我输入内容，我会得到背景图片的一小部分，此外，让课程绝对位置将其从文档flos中取出

这是理想的方法吗？

Answer 1

问题是，如果您使用<span>元素，则需要将其设置为display: inline-block，并且需要设置width才能显示图像。然后它工作，这是一个演示：

.linkedin {
  display: inline-block;
  width: 140px;
  height:100px;
  background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}

.linkedin:hover {
  background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}

<a href="#"><span class="linkedin"></span></a>

正如你在第一个:hover看到的那样，它会闪烁。因为它不会第一次加载你:hover的图像。这就是你应该考虑另一个解决方案的原因就像在一些评论中提到的那样，您可以使用http://fontawesome.io/icons/，然后只需更改颜色。

为防止闪烁，您可以使用<img>标记执行相同操作，然后将加载源并准备好在:hover上显示。但它最适合设置位置，演示如下：

a.special {
    position: relative;
}

a.special img {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

a.special img:first-child {
    visibility: visible;
}

a.special:hover img:first-child {
    visibility: hidden;
}

a.special:hover img:last-child {
    visibility: visible;
}

<a class="special" href="#">
    <img src="http://ipsumimage.appspot.com/140x100,ff7700">
    <img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>

Answer 2

最佳方法是使用SVG并在悬停时更改SVG的填充。

然而，您的方法应该有效，可能是您没有获得正确尺寸的图像？尝试背景大小：封面;＆＃39;或者元素没有宽度。尝试在跨度上设置宽度。 （别忘了给它＆＃39;显示：内联块;＆＃39;也是。

Ed：checkout https://css-tricks.com/lodge/svg/

Answer 3

Font-Awesome对于您想要实现的目标是个好主意。如果您可以使用文本代替图像，那么加载页面的数据也会减少。

顺便说一下，当使用：hover属性时，无需重新定义图像的宽度和高度......只需重新定义您想要进行的更改。