html - 使用 CSS 和 spritesheet 中的多个图像设置按钮样式

Question

我在精灵表中有以下图像，并想用它来设置按钮的样式：

我已经尝试了所有我能想到的东西（甚至是伪元素），但我无法让它发挥作用。我曾认为这样的事情应该有效：

.ui-button {
height:45px;
background-image: url(../button.png), url(../button.png), url(../media/button.png);
background-size: 8px 45px, 8px 45px, 3px 45px !important;
background-position: -63px -1px, -77px -1px, -73px -1px; 
background-repeat: no-repeat, no-repeat, repeat;
}

但事实并非如此。背景大小位是我正在使用的精灵表中每个块的大小，位置是精灵表中每个部分的左上角坐标。显然我做错了什么。什么？

编辑：这是整个图像：

Answer 1

这是我用 JSFiddle 尝试过的：

http://jsfiddle.net/Kpusc/

.ui-button {
    height:45px;
    width:18px;
    background: url(http://i.stack.imgur.com/ipKrd.png);
    background-position: -72px -1px;
    background-repeat: no-repeat;
    position:relative;
    border:0;
}

.ui-button:before {
    content:"";
    display:block;
    height:45px;
    width:8px;
    background: url(http://i.stack.imgur.com/ipKrd.png);
    background-position: -64px -1px;
    background-repeat: no-repeat;
    position:absolute;left:0;top:0;
}

 .ui-button:after {
     content:"";
     display:block;
     height:45px;
     width:8px;
     background: url(http://i.stack.imgur.com/ipKrd.png);
     background-position: -78px -1px;
     background-repeat: no-repeat;
     position:absolute;right:0;top:0;
 }

​</p>

不幸的是，我只能将其设为 34 像素。因为我不能让中心内容重复。

我想您需要使中心部分至少宽于 60 像素，以便可以将其用作.ui-button背景图像（或者可能将其完全作为单独的文件，因此可以重复）。

我想知道是否还有其他解决方法。