具有多个背景图像的帧

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索引问题。在重复之前声明正确的边距解决了问题。

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

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

我在http://jsfiddle.net/Wnq3z/

写下并保存了它

我只是谷歌搜索并找到了一个解决方案，在我回忆起我读到有关CSS 3中存在的内容后，我感谢http://codebrief.com/2011/11/two-game-changing-css-3-features/。

Answer 3

等待小提琴，我建议你只使用中心图像， 用以下的东西围绕它的边界：

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

编辑：作为一个注释，border-radius的诞生是为了绕过Sliding Doors技术......