3

我有一个宽度为 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%;
}

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

4

2 回答 2

3

你可以这样做：

演示

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 点的间隔内重复（尽管我有时会发现这也很有用）。

于 2012-09-17T20:57:54.317 回答
1

CSS2 不支持多个背景图像。您需要嵌套另一个 HTML 元素来完成这项工作。

见：http ://www.quirksmode.org/css/multiple_backgrounds.html

于 2012-09-17T20:48:42.110 回答