1

我正在尝试使用选项卡按钮的背景图像构建选项卡菜单系统。

标签按钮图像高 200 像素，宽 40 像素。由于我希望这些选项卡的高度可变，我想知道正在使用的图像是否可以在选项卡按钮内有 3 个不同的位置，以使其顶部和底部的圆形外观与中心的高度灵活。

这是我的尝试。它没有产生我想要的结果。这应该如何工作：

background-image:url(tabs-large.png); 
background-position:0 0, 0 20px, 0 180px; 
background-size:100% 20px, 100% 100%, 100% 20px;
4

1 回答 1

5

目前，您只有一个background-image. 这只会创建一个 layer，所以只有你的0 0位置和100% 20px大小被使用，其余的被忽略。

如果tabs-large.png代表您的整个标签图像，您需要将其分成三部分：例如顶部边缘、底部边缘和中间部分，然后在其自己的图像中指定每个部分。您还需要确保顶部和底部边缘不会重复，而中间部分会重复。

下面是代码的样子：

background-image: url(tabs-large-top.png), url(tabs-large-middle.png), url(tabs-large-bottom.png);
background-position: 0 0, 0 20px, 0 180px;
background-repeat: no-repeat, repeat-y, no-repeat;
background-size: 100% 20px, 100% 100%, 100% 20px;

这样，每张图像对应一个位置和一个尺寸，顺序相同。

于 2012-09-26T11:05:51.853 回答