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位置没有任何意义。

＆＃13;

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 2

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