[英]Position Image Sprite with CSS on a button
I am trying to do something like this image below with CSS to build the buttons and then an image sprite to show the center content of the button. 我正在尝试使用CSS在下面的图像中进行操作,以构建按钮,然后使用图像精灵显示按钮的中心内容。
Here is a demo of the code I have so far, I am having trouble getting my sprite images to position correctly. 这是到目前为止的代码演示,我无法使子画面图像正确定位。 Any help to improve this CSS to look more like my image above would be great.
改善此CSS使其更像上面的图像的任何帮助都将非常有用。 I think the actual HTML structure could be improved as well?
我认为实际的HTML结构也可以改进?
http://dabblet.com/gist/2212456 http://dabblet.com/gist/2212456
HTML HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
CSS CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
http://dabblet.com/gist/2213271 http://dabblet.com/gist/2213271
http://dabblet.com/gist/2213121 http://dabblet.com/gist/2213121
Hi you have not defined the position absolute in #left & #right so i controlled the sprite images through absolute positioned. 嗨,您尚未在#left和#right中定义绝对位置,因此我通过绝对位置控制了子画面图像。
you can adjust your images through changes in position top,left,bottom,right whatever you need.... 您可以根据需要通过更改顶部,左侧,底部,右侧的位置来调整图像。
Here is your updated css :- 这是您更新的CSS:
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
background-position: 16px -16px;
height: 15px;
left: 15px;
position: absolute;
top: 12px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
background-position: 0 -29px;
left: 15px;
position: absolute;
top: 13px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
or see the live demo:- http://dabblet.com/gist/2213048 或观看现场演示:-http: //dabblet.com/gist/2213048
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.