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

另外一些阅读材料如何增强这种情况：CSS sprites（在一次下载中将所有这些图标合并在一起以加快速度）和CSS Data URI（将图标直接嵌入.css文件中以减少下载次数）。

Answer 2

你可以使用css背景。

.class{
background-image:url('image.png');
}

Answer 3

使用您的第一个示例，格式如下：

<a href= "http://twitter.com">
<img src= "/images/Twitter.png" />
</a>

对于悬停，如果您将链接分配给班级，您也应该能够设置悬停质量。

http://kyleschaeffer.com/user-experience/pure-css-image-hover/

Answer 4

上述答案是您问题的一个很好的例子

对于像这样的链接使用 -

<a href="http://twitter.com"> <img src="/images/Twitter.png" /> </a>
<a href="http://github.com"> <img src="/images/Github.png" /> </a>
<a href="http://quora.com"> <img src="/images/Quora.png" /> </a>

对于悬停效果，请使用

li a:hover{color:#ff0000} as css

这将在悬停时显示红色。

如何使用CSS而不是HTML显示这些图像？

4 个答案: