Html 具有多个背景图像的帧

我尝试使用多个背景图像在液体宽度div上获得此结果：

我将图像分为三部分：

我试着用这样的方式来塑造这个角色：

        height: 14px;
        background-image: url(static/img/workspace-pre-hr-l.gif), 
            url(static/img/workspace-pre-hr-bg.gif),
            url(static/img/workspace-pre-hr-r.gif);
        background-repeat: no-repeat, repeat-x, no-repeat;
        background-position: left, center, right;

但是右边的边距不起作用，所以我用这个：

有什么帮助吗？谢谢

编辑 小提琴

已解决

---

这似乎是图像中的z索引问题。在重复使用之前声明右边距解决了问题。

等待小提琴，我建议您仅使用中间图像， 用类似以下的东西将其边界围起来：

border-radius: 10px 10px 0px 0px;

---

编辑：请注意，border radius天生就是为了绕过这项技术…

CSS 3支持

border image

规则，如果您愿意放弃与早期CSS版本和用户代理的兼容性，它可以实现您想要的功能。语法看起来更精简，更易于阅读：

<div style="border-width: 25px; border-image: url(http://codebrief.com/old/uploads/2011/11/aqua_bg.png) 25 25 25 25 repeat; background-color: #00e0a0; background-clip: padding-box;">Hello World!</div>​

你好，世界！​

我写了并保存在

---

我只是在谷歌上搜索了一下，找到了一个解决方案，回想起来，我读到了一些关于CSS 3中存在的问题。据我所知，图像是按照

背景图像
属性中指定的顺序堆叠的。所以我的理论是
workspace-pre-hr-r.gif
显示在
workspace-pre-hr bg.gif
下面

试试这个

background-image: url(static/img/workspace-pre-hr-l.gif), 
  url(static/img/workspace-pre-hr-r.gif),
  url(static/img/workspace-pre-hr-bg.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left, right, center;

有没有可能？工作区的
pre-hr bg.gif
a设置宽度？艾伦：这是我重复的1px宽度的图像。这是最佳的解决方案，谢谢，但是多个bg图像虽然也很新，但在浏览器中有更好的支持。