切出图像的中间部分（显示示例）？

Question

这是我见过Grooveshark所做的事情，它消除了为可扩展按钮等使用多个图像的需要。

基本上，像这样的图像

用于生成任何宽度小于图像本身的按钮。我认为这是通过某种方式修剪中间来完成的，但我不确定如何。我查看了CSS属性的用法 here ，但似乎无法找出除了15px填充之外的所做的事情。

有谁知道如何复制相同的效果？

编辑：为了清楚起见，我正在谈论削减单个按钮的中间部分（我确实知道我已经为4个按钮样式提供了精灵图片，所以它可能会当我说“剪掉图像的中间部分”时，我会感到困惑。）

Answer 1

您所谈论的内容被称为sliding doors技术。通过将背景图像应用于容器元素以显示左边缘，您可以将同一图像应用于仅显示右边缘的另一个元素。

例如：

.menu li {
  background: url(button-sprite.png) 0 0 no-repeat;
  padding-left: 10px;
}

.menu li a {
  background: url(button-sprite.png) 100% 0 no-repeat;
  display: block;
}

列表项显示图像的左边缘。填充允许左边缘显示何时放置另一个元素。

锚元素显示图像的右边缘，并将其裁剪为文本内容的所需宽度。

Answer 2

我知道无法在CSS中操纵像这样的图像 我想你会发现他们所做的是将顶部图像和底部图像始终放在顶部和底部，然后用中间图像填充其余部分。 这也适用于每一方，我会添加CSS3代码，CSS2代码应该很容易确定。

这看起来像（CSS3）：

.button_horizontal {
    background: url(topimage) top left no-repeat, 
                url(bottomimage) bottom left no-repeat,
                url(middleimage) top left repeat-y;

} 


.button_vertical {
    background: url(left.png) top left no-repeat, 
                url(right.png) top right no-repeat,
                url(middle.png) top left repeat-x;
}

---

这看起来像（CSS2）：

.top {
  background: url(top.png) top left no-repeat; 
  width:100%;
  height:10px;
}

.middle {
  background: url(bottom.png) bottom left no-repeat;
  width:100%;
  height:180px;
}
.button{
  background: url(middle.png) top left repeat-y;
  width:500px;
  height:200px;
}

<div class="button">
  <div class="top">&nbsp;</div>
  <div class="middle"><p>stuff goes in here :D</p></div>
</div>

Answer 3

CSS允许将背景图像移动到任何位置。 为了显示部分背景，您需要定义CSS，如下所示：

.button {
  background: transparent url(sprite.png) left top no-repeat;
  display: block;
  height: 40px;
  width: 160px;
}
.button:hover {
  background-position: left bottom;
}
.button:focus {
  background-position: left center;
/* or
  background-position: left -50%;
  background-position: left -40px;
*/
}

Answer 4

@Pixelatron;我知道你接受了答案，但检查这个例子可能对你有所帮助＆amp;同样简单的解决方案http://jsfiddle.net/sandeep/CQmJz/

的CSS：

a{
    text-decoration:none;
    display:inline-block;
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0;
    position:relative;
    padding:8px 0 8px 10px;
    height:17px;
}
a:after{
    content:"";
    display:block;
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0;
    position:absolute;
    height:33px;
    width:10px;
    top:0;
    right:-10px;
}


a:hover{
    background-position:0 -34px;
}
a:hover:after{
    background-position:-490px -34px;
}

Answer 5

这称为border-image。