0

<span>我开始使用设置为inline-block和设置背景创建一个站点。然后我会在里面放一些文本（按钮文本）。这很有效，因为我使用精灵来提高性能。然后我意识到我需要调整按钮的大小。我无法调整精灵的大小，因为它会抛出我所有的位置。我现在已经决定，对于所有需要调整大小的按钮，我应该使用单独的图像。

我有两个选项继续使用inline-block <span>带有背景的 div 或使用 div 内的图像，其位置设置为绝对，因此我可以将文本拉入其中。我认为这可能会更好，因为这样我可以调整 div 而不是图像的大小，并且里面的所有东西都应该更容易确保它位于中间。（如text-align:center）例如。

这是我的小提琴，您认为这是一种安全的方法吗？

http://jsfiddle.net/peter_heard01/CVzHg/

编辑：

我的意思是说我对背景方法的恐惧是我不相信背景在旧浏览器上调整得很好？

4

2 回答 2

1

根据您的目标，您可以考虑使用 9-tile 背景图像。您可能知道该技巧：按钮的每个角、天花板、底部、左侧、右侧和中心有 9 个图像。在您的网站中，您创建一个 3x3 表格（或 DIV 结构）并使用适当的图像作为每个单元格的背景（包括适当的background-repeat）。

这种技术的优点是图像根本不会调整大小。它们在各种尺寸下看起来都很完美。

加载 9 个文件是性能问题。因此，您也可以将所有图像放在一起，并使用 显示适当的区域background-position。由于您在这种情况下依赖元素的剪辑并且无法使用background-repeat，因此您需要一个相当大的图像（与您网站上的 larges 按钮一样大）。

于 2013-08-30T11:50:52.447 回答
0

绝对 div 的背景位置设置为中心，背景大小设置为 100% 100%（请注意，它不会保持纵横比）。保持按钮标题绝对定位，顶部 50% 和负上边距（看看什么效果最好，它应该是字体大小的负 50-75%）。背景位置还允许在鼠标悬停时更轻松地交换图像等，而不必编写 Javascript 来更改 mouseover 和 mouseout 事件的图像源。

但同样，您应该以最适合您的方式进行操作。

在此处查看我的示例。

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;
}
于 2013-08-30T11:36:35.407 回答