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 に答える