Question

我知道也有类似的问题，但是它们并不能完全回答我的问题。我正在尝试一些非常简单的事情，将背景图像转换为链接，正在学习一个教程，他很轻松地完成了操作，所以我尝试了一下，但是它没有用，图像没有显示，我从教程，但这对我不起作用。

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="s017.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
    <h1>CSS</h1>
    <a href="http://www.facebook.com" id="fb"></a>
    <a href="http://www.twitter.com" id="tw"></a>
    <a href="http://www.instagram.com" id="ig"></a>
    <a href="http://www.linkedin.com" id="in"></a>
    <a href="http://www.snapchat.com" id="sc"></a>
    <a href="http://www.whatsapp.com" id="wa"></a>
</body>
</html>

body{
font-family: open-sans, sans-serif;
}

#fb/*, #tw, #sc, #in, #ig, #wa*/{
height: 60px;
width: 60px;
display: block;
position: absolute;
}

#fb {
background-image: url('image03.png');
background-position: 0px 0px;
}

关于结果：

如您所见，除了标题之外，这里什么都没有我教过它是浏览器，但是我在Mozilla和Chrome上尝试了同样的结果。

Answer 1

如果要将其用作缩略图，建议不要使用背景图像，而只使用图像。设置背景图像时，它不会调整图像的大小，而是在背景中显示图像的60x60px小部分。如果左上角是白色，那就是您所看到的。代替背景图片，试试看：

<a href="https://www.facebook.com">
  <img id="fb" src="http://blog.addthiscdn.com/wp-content/uploads/2015/11/logo-facebook.png">
</a>

这里的codepen可以显示我相信您正在寻找的东西。如果不完全正确，或者有特定的原因必须使用背景图片，请告诉我，我将更新答案以进行反映。

Answer 2

首先，请确保您的CSS文件链接有效，如您所知，您应该将样式代码放入html文件夹中的 s017.css 文件中。
可能是您的图片尺寸过大，无法容纳在60 * 60（a）标签块中，或者图片在您插入的左上角位置留有空白。首先，您可以将CSS中的background-size用作“ #fb” ：

background-size:contain;

对于第二种可能性，应该使用绘画或其他图像编辑器裁剪图像。当然，您可以设置图像中心的位置，但不建议这样做。
希望这项工作对您有帮助！玩得开心！

将背景图片转换为CSS链接

2 个答案: