Question

我想给容器一个背景图像，它基本上是一个白色图像，左侧和右侧有一个花哨的边框。它只有几个像素高，所以在y轴上重复。

但是，图像是设定的宽度，因此不能在x轴上展开/收缩。有没有办法可以给容器3个背景图像 - 左边框1个，右边1个，中心1个？

这样我可以重复中心背景图像并将其夹在侧面背景图像之间。

Answer 1

#container{
background-image: url(image1.png), url(image2.png), url(image3.png);
background-position: left top, right top, center top;
}

Answer 2

我有两张图片，并且可以添加另一张http://jsfiddle.net/xksr01v4/

#back{
   width: 500px;
   height: 250px;
   background-image: url(http://placekitten.com/300/301),
 url(http://static.comicvine.com/uploads/original/11112/111123678/3503035-3468468-2718720139-  batma.jpg);
   background-position: left, right;
   background-repeat: no-repeat;
}

Answer 3

可能有很多方法可以做到这一点，但是this link显示了一种非常简单的方法来扩展背景图像：

background-size: 100% auto;

允许背景图像扩展

3 个答案: