如何在背景图像上获取社交媒体图标？答案

【问题标题】：How to get social media icons on a background image?如何在背景图像上获取社交媒体图标？
【发布时间】：2019-09-20 08:22:00
【问题描述】：

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

【问题讨论】：

如果没有更好的上下文，我们无法为您提供太多帮助。没有 HTML 代码，您的问题中有 HTML 标记。请确保提供必要的代码以便我们为您提供帮助。

标签： html css

【解决方案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

【讨论】：