如何将图像背景添加到 btn-default twitter-bootstrap 按钮？答案

【问题标题】：How to add image background to btn-default twitter-bootstrap button?如何将图像背景添加到 btn-default twitter-bootstrap 按钮？
【发布时间】：2019-08-04 14:17:54
【问题描述】：

我尝试使用现有的类 btn-default 设计一个引导 v3.3.5 按钮，下面是我所做的代码示例。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<style type="text/css">
  .sign-in-facebook
  {
    background-image: url('http://i.stack.imgur.com/e2S63.png');
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
  .sign-in-facebook:hover
  {
    background-image: url('http://i.stack.imgur.com/e2S63.png');
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
</style>
<p>My current button got white background<br/>
<input type="button" value="Sign In with Facebook" class="btn btn-default sign-in-facebook" style="margin-top:2px; margin-bottom:2px;" >
</p>
<p>I need the current btn-default style like below<br/>
<input type="button" class="btn btn-default" value="Sign In with Facebook" />
</p>
<strong>NOTE:</strong> facebook icon at left side of the button.

Facebook 图标示例：

如何修改.sign-in-facebook 的类来创建自己的样式按钮？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

您可以使用button 并将图像插入到按钮内容中，而不是使用input type button。

<button class="btn btn-default">
     <img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>

仅使用 CSS 执行此操作的问题在于，您不能将 linear-gradient 设置为必须使用纯色的背景。

.sign-in-facebook {
    background: url('http://i.stack.imgur.com/e2S63.png') #f2f2f2;
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
  .sign-in-facebook:hover {
    background: url('http://i.stack.imgur.com/e2S63.png') #e0e0e0;
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }

body {
  padding: 30px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style type="text/css">
  .sign-in-facebook {
    background: url('http://i.stack.imgur.com/e2S63.png') #f2f2f2;
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
  .sign-in-facebook:hover {
    background: url('http://i.stack.imgur.com/e2S63.png') #e0e0e0;
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
</style>


<h4>Only with CSS</h4>

<input type="button" value="Sign In with Facebook" class="btn btn-default sign-in-facebook" style="margin-top:2px; margin-bottom:2px;">

<h4>Only with HTML</h4>

<button class="btn btn-default">
  <img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>

【讨论】：

@wazaaaap 他只想用 css 来做，所以他不必手动将元素添加到按钮。

【解决方案2】：

您是否尝试过使用像http://fortawesome.github.io/Font-Awesome/ 这样的图标字体

Bootstrap 自带库，但没有 Font Awesome 那么多图标。

http://getbootstrap.com/components/#glyphicons

【讨论】：

【解决方案3】：

这适用于字体真棒：

<button class="btn btn-outline-success">
   <i class="fa fa-print" aria-hidden="true"></i>
   Print
</button>

【讨论】：

【解决方案4】：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<style type="text/css">
  .sign-in-facebook
  {
    background-image: url('http://i.stack.imgur.com/e2S63.png');
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
  .sign-in-facebook:hover
  {
    background-image: url('http://i.stack.imgur.com/e2S63.png');
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
  }
</style>
<p>My current button got white background<br/>
<input type="button" value="Sign In with Facebook" class="sign-in-facebook btn btn-secondary" style="margin-top:2px; margin-bottom:2px;" >
</p>
<p>I need the current btn-default style like below<br/>
<input type="button" class="btn btn-default" value="Sign In with Facebook" />
</p>
<strong>NOTE:</strong> facebook icon at left side of the button.

【讨论】：