html - 如何在背景图片上获取社交媒体图标？

我正在为学校项目创建一个网站。我目前已经启动并正在工作，但是需要我的社交媒体图标的帮助，以保持其背景图像。我正在使用CSS来调整它们的大小，但是我想我缺少了一些东西。如果有人可以引导我找到正确的代码。谢谢
这是我的社交媒体按钮代码

.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
 .fa-twitter {
  background: #55ACEE;
  color: white;
  }
 .fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
  .fa-instagram {
  background: #125688;
  color: white;
  }

当我滚动到页面末尾时，带有社交媒体图标的白色显示。

对不起，离开这里的HTML是HTML

     </form>
     </div>
     </div>
     <div style="padding-bottom:16px">
     <div Class="module mid">
     <h2>Welcome to Uniforms Today.</h2>
     <div class="module h1">
     <h1>The website that helps parents and kids get their school
     uniforms.</h1>
     </div>
     </div>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com
     /ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-snapchat-ghost"></a>
  <a href="#" class="fa fa-instagram"></a>
   </body>
   </html>

最佳答案

您可以在1个类上使用2个background属性，但是据我研究，这有点棘手。

无需使用1 color属性，而是需要使用渐变颜色属性，例如以下代码：

.fa-facebook {
    background-image: url('[facebook-icon-link]'), linear-gradient(to right, #3B5998, #3B5998);
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size:contain,contain;
}

您可以通过以下链接遵循准则：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds