位置图像与按钮上的CSS雪碧

我想用CSS来做下面的图像来构建按钮，然后用图像精灵显示按钮的中心内容。位置图像与按钮上的CSS雪碧

enter image description here

这里是我到目前为止，我无法让我的子画面图像正确定位代码演示。任何帮助改善这个CSS看起来更像我的图片上面会很好。我认为实际的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

/* 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; 


}

来源

2012-03-27 JasonDavis

HTML结构改进：如果你想设计按钮，然后用'button'元件或其他可聚焦元件等'输入[类型“提交|图像|按钮”]或者可能是一个链接（我猜这里是错误，按钮或图像）。使用键盘的人们将能够使用它们，屏幕阅读器等辅助技术将很容易理解它们在页面中的功能。在按钮中使用HTML图像（或通过输入[type =“image”]中的@src）而不是sprite CSS将允许在禁用图像时显示某些内容（替代文本）（也适用于Windows中的高对比度模式），但CSS启用。 – FelipeAls 2012-03-27 06:17:10

座&联方法

http://dabblet.com/gist/2213271

绝对方法

http://dabblet.com/gist/2213121

来源

2012-03-27 06:06:25

谢谢，这是迄今为止最接近我的目标。在我看到的所有例子中，似乎使精灵图像变小了，那么实际图像位于http://www.codedevelopr.com/assets/images/switcher.png，你是否知道为什么会发生这种情况？ – JasonDavis 2012-03-27 19:53:46

我不清楚你的意思是“小于实际图像”。但在代码中#left和#right span没有任何宽度。在这些跨度内有3个点（...）。这给了那些宽度。但实际的精灵图像比这个宽度大。如果将计数从3个点增加到4个，则可以清晰地看到图像。你必须设置宽度和高度，并使用任何图像替换，如 - font：0/0 a;或文本缩进：-999em ;. – 2012-03-28 09:17:05

嗨，你还没有定义在绝对位置#left & #right，所以我通过控制精灵图片绝对定位。

您可以通过在位置上，左，下的变化调整自己的图像，右边你需要什么....

这是你更新的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; 


}

或者看到现场演示： -http://dabblet.com/gist/2213048

来源

2012-03-27 06:06:03

位置图像与按钮上的CSS雪碧

回答

相关问题