[英]Having a sprite image inside a button with text
I'm trying to create a button and here is the demo so far. 我正在尝试创建一个按钮,这是到目前为止的演示 。
Right now I can't figure out how I can position the sprite image so that only the black icon is visible. 现在,我不知道该如何放置子画面图像,以便仅黑色图标可见。
Does anyone know how I can fix this? 有谁知道我该如何解决?
This is what I want to achieve with the button: 这是我想通过按钮实现的:
No hover: 无悬停:
Hover: 徘徊:
Here is the code I have: 这是我的代码:
HTML: HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS: CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. 这将起作用。 Here is a jsfiddle
这是一个jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either: 您可以:
a. 一种。 reduce the height of the button;
减少按钮的高度;
b. b。 increase the vertical gap between the two sprites in the image itself;
增加图像本身中两个精灵之间的垂直间隙;
c. C。 background: url(...) no-repeat 0 2px;
背景:url(...)无重复0 2px; adjust the value to push out the red icon
调整值以推出红色图标
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
您可以提供图像显示位置,如下所示:
display:inline-block
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.