html - 在 HTML 链接上放置背景图片

Question

我正在尝试通过 CSS 将社交图标显示在页脚上。

HTML

<div class="copyright container">
  <div class="sicons">
    <a class="copy1" href="#"></a>
    <a class="copy2" href="#"></a>
    <a class="copy3" href="#"></a>
    <a class="copy4" href="#"></a>
    <a class="copy5" href="#"></a>
  </div>
</div>

CSS

.container {
  overflow: hidden;
  margin: 0em auto;
  width: 1000px;
}
.copyright {
  overflow: hidden;
  padding: 1em 0em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.copyright a {
  text-decoration: none;
}
.copyright img {
  vertical-align: middle;
  width: 70px;
  height: 70px;
}
.copyright a.copy5 img {
  width: 50px;
  height: 50px;
}
.copyright a.copy1 {
  background: url(1.png) center no-repeat;
}
.copyright a.copy2 {
  background: url(2.png) center no-repeat;
}
.copyright a.copy3 {
  background: url(2.png) center no-repeat;
}
.copyright a.copy4 {
  background: url(4.png) center no-repeat;
}
.copyright a.copy5 {
  background: url(5.png) center no-repeat;
}

图像不会用这样的代码显示。它们会在我添加时显示

.copyright a.copy1, .copyright a.copy2, .copyright a.copy3, .copyright a.copy4, .copyright a.copy5 { 
  display: inline-block; 
  text-decoration: none; 
  margin:15px; 
  text-indent:-9999px; 
  width:50px; 
  height:50px; 
}

但使用此代码后图像看起来失真了。我哪里出错了？

Answer 1

这是一个开始的方法。

.copyright a {
  text-decoration: none;
  display: inline-block;
  height: 80px;
  width: 80px;
}
.copyright a.copy2, .copyright a.copy4 {
  background: url(http://lorempixel.com/80/80/sports/);
}
.copyright a.copy1, .copyright a.copy3, .copyright a.copy5 {
  background: url(http://lorempixel.com/80/80/);
}

<div class="copyright container">
  <div class="sicons">
    <a class="copy1" href="#"></a>
    <a class="copy2" href="#"></a>
    <a class="copy3" href="#"></a>
    <a class="copy4" href="#"></a>
    <a class="copy5" href="#"></a>
  </div>
</div>

如果图像大小不同，这表明 anchor 大小仍然相等。

.copyright a {
  text-decoration: none;
  display: inline-block;
  height: 80px;
  width: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.copyright a.copy2, .copyright a.copy4 {
  background-image: url(http://lorempixel.com/80/160/sports/);
}
.copyright a.copy1, .copyright a.copy3, .copyright a.copy5 {
  background-image: url(http://lorempixel.com/160/80/);
}

<div class="copyright container">
  <div class="sicons">
    <a class="copy1" href="#"></a>
    <a class="copy2" href="#"></a>
    <a class="copy3" href="#"></a>
    <a class="copy4" href="#"></a>
    <a class="copy5" href="#"></a>
  </div>
</div>

这里图像填充了它的容器背景，这当然会裁剪它们，一些在高度，一些在宽度，因为它们被设置为保持它们的比例。

.copyright a {
  text-decoration: none;
  display: inline-block;
  height: 80px;
  width: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.copyright a.copy2, .copyright a.copy4 {
  background-image: url(http://lorempixel.com/80/160/sports/);
}
.copyright a.copy1, .copyright a.copy3, .copyright a.copy5 {
  background-image: url(http://lorempixel.com/160/80/);
}

<div class="copyright container">
  <div class="sicons">
    <a class="copy1" href="#"></a>
    <a class="copy2" href="#"></a>
    <a class="copy3" href="#"></a>
    <a class="copy4" href="#"></a>
    <a class="copy5" href="#"></a>
  </div>
</div>