如何将图像背景添加到btn-default twitter-bootstrap按钮? [英] How to add image background to btn-default twitter-bootstrap button?
本文介绍了如何将图像背景添加到btn-default twitter-bootstrap按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用现有的类 btn-default 设计一个bootstrap v3.3.5按钮,以下是我所做的代码示例。
I try to design a bootstrap v3.3.5 button by using the existing class btn-default, below are the sample of codes of what I had done.
<!-- 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图标:
Sample facebook icon:
如何修改 .sign-in-facebook
的类以创建自己的样式按钮?
How I can modify the class of .sign-in-facebook
to create my own style button ?
推荐答案
代替使用输入类型按钮
,可以使用按钮
并将图像插入按钮内容中。
Instead of using input type button
you can use button
and insert the image inside the button content.
<button class="btn btn-default">
<img src="http://i.stack.imgur.com/e2S63.png" width="20" /> Sign In with Facebook
</button>
仅在CSS上执行此操作的问题是无法设置 linear-渐变
必须使用纯色。
The problem with doing this only with CSS is that you cannot set linear-gradient
to the background you must use solid color.
.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>
这篇关于如何将图像背景添加到btn-default twitter-bootstrap按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文