css - 为什么我的图标显示图像重复？

我正在尝试在页面底部创建社交图标，但它显示的是同一图像的倍数。

这是我的代码：

<div class="social">
    <span *ngFor="let socialLink of footerContent.socialLinks">
      <a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}>
        <mat-icon></mat-icon>
      </a>
    </span>
  </div>

这就是图像的样子



如何设置样式，以便每个图标仅显示一张完全合适的图像？

最佳答案

如果没有链接到您的站点，将很难给出精确的解决方案。
但是从图片看来，将其设置为背景时图像会重复，也许盒子太大了，所以背景会重复。
也许此CSS可以帮助：

.social a {
  backgrouind-repeat:no-repeat;
}

或者这个：

.social a {
  max-width:20px;
}

关于css - 为什么我的图标显示图像重复？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58070289/