3种不同的CSS背景

Question

我想知道CSS是否可以实现以下功能。

我希望在整个背景宽度上有3个水平条。 这是我想要背景的粗略模型

我一直在研究以下内容，但似乎无法定位任何背景。

#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
          url("bg2.png"), 
          url("bg3.png");
background-position: 10px 10px,
          170px 10px, 
          750px 10px;
background-repeat:repeat-x;
}

这是一个小提琴： http : //jsfiddle.net/5fo054L2/1/

知道我在做什么错吗？

Answer 1

您几乎拥有它。 问题是您对x和y位置感到困惑。 另外，如果重复x位置，则没有任何意义。

 .blog { width: 100%; height: 100%; background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png"); background-position: 0px 170px, 0px 100px, 0px 10px; background-repeat: repeat-x; } 

这是更新的jsfiddle： http : //jsfiddle.net/5fo054L2/3/

请注意，（示例中的文本的）垂直高度将限制您看到的背景图像的数量。

Answer 2

您还可以制作三个图像文件，将它们放置在其他所有文件之下，并使用绝对定位进行设置。