html - 如何在 CSS 中拉伸(stretch)单个背景图像

Question

background: url(timages/wb-right.png) 100% 0 no-repeat, url(timages/wb-left.png) 0 0 no-repeat, url(timages/wb-top.png) 0 0 no-repeat, url(timages/wb-bottom.png) 0 80px no-repeat;

我目前有这段代码为盒子的背景指定了 4 张图像。每一侧都有一个。左上右下。

唯一的问题是顶部和底部图像不会拉伸(stretch)或重复框的整个宽度。这样可以吗。如果我将任何不重复设置为重复，它会填满整个背景。

任何有用的建议

Answer 1

您正在寻找这样的东西: ?

演示: http://jsfiddle.net/abhitalks/dgcfK/

background-image: url(timages/wb-top.png), 
    url(timages/wb-left.png), 
    url(timages/wb-right.png), 
    url(timages/wb-bottom.png);
background-position: left top, left bottom, top right, bottom right;
background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;