html - 具有多个背景图像的帧

Question

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

我将图像分为三个部分：

我正在尝试像这样设置 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;

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

有什么帮助吗？谢谢

编辑 小提琴！http://jsfiddle.net/J5Tsa/

已解决 似乎这是图像之间的 z-index 问题。在重复之前声明右边距解决了问题。

Answer 1

据我了解，图像是按照background-image属性中指定的顺序堆叠的。所以我的理论是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;

Answer 2

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

<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>​

我写并保存在http://jsfiddle.net/Wnq3z/

我只是在谷歌上搜索并找到了一个解决方案，我将其归功于http://codebrief.com/2011/11/two-game-changing-css-3-features/在回忆起我读过一些关于 CSS 3 中存在的内容之后。

Answer 3

等待小提琴，我可以建议你只使用中心图像，用类似的东西四舍五入它的边界：

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

编辑：作为一个注释，边界半径是为了绕过滑动门技术而诞生的......