html - 我怎样才能用 CSS 而不是 HTML 显示这些图像？

Question

我正在尝试将一些社交图标添加到我博客的侧边栏。在我的侧边栏中，我将一些主题组织在列表中。在此列表的末尾，我想要一个显示我的社交图标的列表项。 我设法通过使用标签实现了这一点，并得到了这样的东西:

<!-- Social icons -->
<li>
<img src="/images/Twitter.png"><a href="http://twitter.com"></a></img>
<img src="/images/Github.png"><a href="http://github.com"></a></img>
<img src="/images/Quora.png"><a href="http://quora"></a></img>
<img src="/images/LinkedIn.png"><a href="http://linkedin.com"></a></img>
<img src="/images/Google.png"><a href="http://google.com"></a></img>
<img src="/images/Flickr.png"><a href="http://flickr.com"></a></img>
<img src="/images/Vimeo.png"><a href="http://vimeo.com"></a></img>
<img src="/images/YouTube.png"><a href="http://youtube.com"></a></img>
</li> 

但是，我不喜欢这种方法，因为

• 由于某种原因链接失效了
• 我无法调整图像的大小(它们太大了)
• 我将无法实现悬停效果

因为我刚开始使用 CSS，所以我不知道如何解决这个问题。我尝试使用一些 div 容器、id 和类，但我无法让它工作。所以这是对你们所有的 CSS 专家:

如何使用 CSS 调整图像大小、内联显示、带有链接和悬停效果并摆脱这些标签？

Answer 1

链接不起作用，因为标签嵌套不正确:<a href="..."><img src="..." /></a> .

要使用 CSS 显示图像，您需要删除 img标记并添加 background-image CSS样式到<a>元素(连同一些填充等，以便文本不重叠)。 Here is an step-by-step example .

还有一些其他阅读 Material 如何增强这种情况:CSS sprites (将所有这些图标合并到一个下载中以加快速度)和 CSS Data URI (将图标直接嵌入 .css 文件以减少下载次数)。