1024px页脚两侧的CSS 2背景图像（x宽度）

我有一个页脚，宽度是1024px，背景图像是1024px乘以482px

我想在它的左边放一个x重复背景，在它的右边放一个x重复背景。我该怎么做

这就是我所拥有的：

.footer {
background:
  url("footerleft-bg.png") repeat-x,
  url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}

---

但它使左侧背景图像完全覆盖右侧背景图像。

CSS2不支持多个背景图像。您需要嵌套另一个HTML元素来实现此功能

---

请参阅：

您可以这样做：

---

但是，如果不使用嵌套元素或伪元素，就无法实现这一点。背景会自动重复或不重复。它不会只在从A点到B点的间隔内重复（尽管有时我也会发现这很有用）。

你不能这样做。重复的背景图像将始终在框的整个宽度或高度上重复。不可能让一张图像覆盖左半部，另一张图像覆盖右半部。即使是在CSS3中，也无法使用多个背景图像实现他想要的效果。但是，是的，关于嵌套另一个HTML元素，你是对的。我不认为它的意思像“CSS2”，而是像“CSS，2个背景图像…”。我知道你会回答这个问题：）+1我本来打算发布一个类似的解决方案，但你比我抢先一步派斯，没错。IE7不支持伪元素，因此必须使用子元素。但IE7也不支持多种背景（如问题所述）。

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 10em;
    background: black;
}
footer:before, footer:after {
    position: absolute;
    top: 5%; bottom: 5%;
    width: 40%;
    background-repeat: repeat-x;
    background-size: 1px 100%;
    content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }