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

这是一个如何做的开始。

＆＃13;

.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/);
}

＆＃13;

<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>

＆＃13;

如果图像尺寸不同，则显示并仍然保持锚尺寸相等。

＆＃13;

.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/);
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

.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/);
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，此示例中未使用您的’类。为了保持代码清洁，如果您没有在.copyright img div中放置任何图像，我建议将其删除。

毫无疑问，您需要设置.copyright和width以使空height背景可见。另外，我建议在<a></a>标记中添加一个空格式 }，以确保它们出现在您的网页中，因为它们不是空的。

此外，<a> 对您的设置至关重要，但使用此边距会导致混乱。如果您需要在链接中添加内容，则应在链接中使用填充或绝对定位元素。

如果需要任何进一步的帮助，我希望获得JSFiddle您的代码，以及从Google等处拍摄的一些照片作为占位符。

Answer 3

为什么不将图像作为链接。尝试这样的事情：

 <div class="copyright container">
     <div class="sicons">
         <a class="copy1" href="#"><img  src="1.png"></a>
         <a class="copy2" href="#"><img src="2.png"></a>
         <a class="copy3" href="#"><img src="3.png"></a>
         <a class="copy4" href="#"><img src="4.png"></a>
        <a class="copy5" href="#"><img src="5.png"></a>
      </div> 
 </div>

但是当然如果你想保留文字，你可以随时为图像添加标题，并使标题成为要遵循的链接。只需在其中放置一个带有链接标题的div并覆盖在所选图像上方即可轻松实现。

Answer 4

你可以试试这个，我更喜欢把照片放在：属性之后。像这样的图片更灵活，如果你改变.copyright a { position: relative; display: inline-block; height: 80px; width: 80px; } .copyright a:after { content: ''; display: block; position: absolute; width: 80px; height: 80px; top: 0px; left: 0px; } .copyright > .sicons > .copy2:after, .copyright > .sicons > .copy1:after, .copyright > .sicons > .copy3:after, .copyright > .sicons > .copy4:after, .copyright > .sicons > .copy5:after { background: url(http://lorempixel.com/80/80/sports/); }宽度它将起作用，她必须高于图片的宽度。但是，ProDexorite的答案也很好：）

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

将背景图像放在HTML链接上

4 个答案: