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

Question

我在 sprite 表中有以下图像，想用它来设置按钮样式:

我已经尝试了所有我能想到的(甚至是伪元素)，但我无法让它工作。我曾认为这样的事情应该有效:

.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;
}

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

编辑:这是整张图片:

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;
 }

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

我想你需要使中心部分至少比 60px 宽，以便它可以作为 .ui-button 背景图像应用(或者可能将其完全作为一个单独的文件，所以有可能重复)。

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