demo

Question

我的页脚宽度为1024像素，背景图像为1024像素×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点的间隔内重复出现（尽管我有时会发现它也很有用）。

Answer 2

CSS2不支持多个背景图片。您需要嵌套另一个HTML元素才能使其正常工作。

请参阅：http://www.quirksmode.org/css/multiple_backgrounds.html

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

2 个答案:

demo