时间戳

首页 > 解决方案 > 引导按钮中的图像随背景颜色而不是按钮颜色而变化

html - 引导按钮中的图像随背景颜色而不是按钮颜色而变化

问题描述

我正在尝试应用我在 forkawesome ( https://forkaweso.me/Fork-Awesome/icon/discord/ )上创建的不和谐徽标

我的代码遇到了一个烦人的问题，因为我试图将不和谐徽标放在一个按钮中，但每次背景更改时，但不是使用按钮之一：

图片

（我滥用图标的大小来显示确切的问题）

我也尝试过使用 .jpg 代替图像，但是当我将鼠标悬停在按钮上时，您可以看到图像的白色背景

      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="password" required>
      </div>
      <button type="submit" name="submit" class="btn btn-default">Login</button>
      <a href="scripts/discordLogin.php" class="btn btn-default">Discord Login <span class="fa fa-discord fa-5x" aria-hidden="true" ></span></a>
    </form>
  </div>

如果可以简单地让徽标随按钮颜色发生变化，那就太棒了！

（如评论中所问的 jsfiddle https://jsfiddle.net/9fmrwyje/）

标签： htmlcssbootstrap-4

解决方案

那是你想要的吗？

* {
  font-family: arial;
  background-color: #2a3752;
  color: #dcd1d1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  background-color: #2a3752;
}

.discord-logo-btn .fa-discord {
  background: #fff;
}

.discord-logo-btn:hover .fa-discord, .discord-logo-btn:focus .fa-discord  {
  background: #e6e6e6;
}
<!DOCTYPE html>


<html>

<head>
  <meta http-equiv='content-type' content='text/html;charset=utf-8' />
  <title>Login</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
  <link rel="icon" type="image/png" href="images/128.png" />
  <title>Login - JAPC Web management panel</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="container">
    <div style="display: flex; justify-content: center;">
      <img src="images/128.png" alt="Join and play coop logo" align="middle">
    </div>
    <h3 class="text-center">JAPC Web Management panel login</h3>
    <form action="" method="post">
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" class="form-control" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="password" required>
      </div>
      <button type="submit" name="submit" class="btn btn-default">Login</button>
      <a href="scripts/discordLogin.php" class="discord-logo-btn btn btn-default">Discord Login <span class="fa fa-discord fa-5x" aria-hidden="true" ></span></a>
    </form>
  </div>
</body>

</html>

推荐阅读