Question

我正在尝试使用CSS3多个背景：顶部（不重复），中间部分（1px切片重复使容器“可扩展”）和底部（不重复）。我遇到的问题是中间部分重复，覆盖顶部和底部。在IE9，FF6和Chrome中也有相同的结果。这是我的代码：

    #container {
   margin: 0 auto;
   width:1093px;
   background-image: url('WC-Background-Top.jpg'), url('WC-Background-1px.jpg'), url('WC-Background-Bottom.jpg');
   background-position: top, middle, bottom;
   background-repeat: no-repeat, repeat-y, no-repeat;
}

Answer 1

使用<div>标记分割您的网页，并将相关图片应用于每个<div>的背景图片属性。这样，您可以为background-repeat指定不同的属性值。

Answer 2

您可以创建三个单独的div，并为每个div指定单独的背景。

#topContainer{background: url('WC-Background-Top.png') no-repeat; }
#midContainer{background: url('WC-Background-1px.png') repeat-y; }
#bottomContainer{background: url('WC-Background-Bottom.png') repeat-y; }

我认为，这是做你想做的最有效的方法。

添加您提到的其他款式。如果您希望这些内容超出其他元素的流量，请考虑给它们position:absolute。

使用CSS3多个背景只有一个重复

2 个答案: