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。这是creates only one 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;

这样，每个图像对应一个位置和一个大小，顺序相同。

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

1 个答案: