具有多个位置的CSS3多个背景图像

Question

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

标签按钮图像高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;

Answer 1

目前,您只有一个background-image.这只会创建一个图层,因此只会使用您的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;

这样,每个图像以相同的顺序对应于一个位置和一个尺寸.