1024 像素页脚两侧的 CSS 2 背景图像(x 宽度)

Question

我有一个宽度为 1024 像素的页脚，背景图像为 1024 像素 x 482 像素。

我想在其左侧放置一个 x 重复背景，在其右侧放置一个 x 重复背景。我该怎么做？

这是我的:

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

但是它使得左边的背景图片完全覆盖了右边的。

Answer 1

你可以这样做:

demo

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

但是，如果不使用嵌套元素或伪元素，就没有办法做到这一点。背景重复或不重复。它不会仅在从 A 点到 B 点的间隔内重复自身(尽管我有时会发现这也很有用)。