Css 使用3个图像创建按钮

我有3张图片，一个应该重复的中间块和两个末端部分（左和右）。 我想能够生成下面的按钮使用这三个图像

这是完整的按钮

对不起，背景太暗了

到目前为止，我已经完成了这个代码

li {
  background-image: url(/images/middle.png), url(/images/right.png), url(/images/left.png);
  background-position: center, right, left;
  background-repeat: repeat-x, no-repeat, no-repeat;
}

它生成了这个按钮

有人知道为什么我的按钮看起来像它，以及如何渲染上面的第一个按钮吗？ 我必须使用3个给定的图像。不，这不是家庭/学校作业：）

编辑：我找到了关于如何解决这个问题的教程。难道没有更好的方法来解决这个问题吗？也许是一种更具语义的方法？

就我个人而言，我会尽量让它尽可能简单，在按钮中间使用1个重复x图像，并使用CSS3圆角来完成边缘。优雅地退化为方形按钮。一个很好的例子是“下载”按钮，来自：

---

如果您只想支持兼容CSS3的浏览器，则可以在

背景图像

中附加多个图像

但是，在CSS3之前，每个HTML元素只能附加1个

背景图像。您尝试附加3个，但CSS中的最后2个图像被忽略。

对于您试图创建的按钮类型，您发现的教程是一个很好的解决方案。它定义了至少3个要将图像附加到的元素。他们用4个，但你只能用3个

到目前为止，我假设您的HTML如下所示：

<ul>
  <li>
    <a href="#" title="My Text button">My Text</a>
  </li>
</ul>




然而，你中间重复的图像是不同的颜色
 这是“老派”版本：）


试验
* {
边际：0px；
填充：0px；
}
保险商实验室{
列表样式：无；
}
李{
明确：两者皆有；
}
.列表按钮{
文字装饰：无；
}
.左{
浮动：左；
宽度：3倍；
高度：23px；
背景：url（“./images/left.png”）左中心不重复；
}
.对{
浮动：左；
宽度：3倍；
高度：23px；
背景：url（“./images/right.png”）左中心不重复；
}
.中{
浮动：左；
高度：23px；
背景：url（“./images/middle.png”）repeat-x；
}






您能给我们中间的.png、右边的.png和左边的.png吗？帮助我们使用家用啤酒代码进行测试。：）如果你的目标浏览器是实现CSS3的，也许你应该使用
边框半径
，
线性渐变
和
框阴影
，而不是图像？@Jarno肯定，这里是右、左、中。按这个顺序。@MatTheCat我必须使用给定的图像。仅凭这些代码，我就得到了一个横跨页面宽度的bulletin+按钮。你看到同样的问题了吗？CSS3支持多重背景。所以我的代码应该是有效的。所以你没有尝试支持旧浏览器？您的最低公分母CSS支持降级计划是什么？@JohnB此应用程序不会在浏览器中运行。CSS3和HTML5将始终得到支持。这是最简单的解决方案，尽管我无法让它工作。该按钮跨越整个页面？@Jarno Argillander:
float:left在

<ul>
  <li class="link-button">
    <a href="#" title="My Text button"><span>My Text</span></a>
  </li>
</ul>

li.link-button {
  background: url(/images/middle.png) repeat-x;
}
.link-button a {
  background: url(/images/left.png) left center no-repeat;
}
.link-button span {
  background: url(/images/right.png) right center no-repeat;
}