我正在尝试通过 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;
}
但使用此代码后图像看起来失真了。我哪里出错了?
最佳答案
这是一个开始的方法。
.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>
关于html - 在 HTML 链接上放置背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34492905/