我开始使用设置为<span>的{{1}}创建网站并设置背景。然后我会在里面放一些文字（按钮文字）。这很好用，因为我使用精灵来表现。然后我意识到我需要调整按钮的大小。我不能调整精灵的大小，因为它抛出了我所有的位置。我现在已经决定，对于需要调整大小的所有按钮，我应该使用单独的图像。
我有两个选项继续使用带背景的inline-block inline-block或在div中使用图像，其定位设置为绝对，因此我可以在其上拉文本。我认为这可能会更好，因为我可以调整div而不是图像，内部的所有内容都应该更容易确保它位于中间。 （例如<span>）。
这是我的小提琴，您认为这是一种安全的方式吗？
http://jsfiddle.net/peter_heard01/CVzHg/
编辑：
我的意思是说我对背景方法的担心是我不相信背景在旧浏览器上调整得很好吗？
答案 0 :(得分：1)
根据您的目标，您可以考虑使用9平铺背景图像。您可能知道这项技术：按钮，天花板，底部，左侧，右侧和中心的每个角落都有9个图像。在您的网站中，您可以创建一个3x3表（或DIV构造），并使用适当的图像作为每个单元格的背景（包括适当的background-repeat）。
这种技术的优点是图像根本不会调整大小。它们看起来各种尺寸都很完美。
加载9个文件是性能问题。因此，您也可以将所有图像放在一起，并使用background-position显示相应的区域。由于您在这种情况下依赖于元素剪辑而无法使用background-repeat，因此您需要一个相当大的图像（与您网站上的大按钮一样大）。
答案 1 :(得分：0)
绝对div将背景位置设置为居中中心，背景大小设置为100％100％（请注意，它不会保持纵横比）。保持按钮标题绝对定位，前50％和负上边距（看看效果最好，它应该是字体大小的负50-75％）。背景位置还允许更轻松地在鼠标悬停等图像交换，而不必编写Javascript以在鼠标悬停和鼠标移除事件上更改图像源。
但是，你应该以最适合你的 的方式去做。
请参阅我的示例here。
div.button{
background: url('https://www.google.com/images/srpr/logo4w.png') center center;
text-align: center;
background-size: 100% 100%;
width:400px;
height:120px;
position: relative;
}
div.title{
width:100%;
height:100%;
top:50%;
font-size: 16px;
margin-top: -12px;
position: absolute;
}