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

Question

我正在为一个学校元素创建一个网站。我目前已经启动并正在工作，但需要帮助我的社交媒体图标保持在背景图像上。我正在使用 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>

Answer 1

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

您需要使用渐变颜色属性，而不是使用 1 个颜色属性，如下代码所示:

.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