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

问题描述：

我试图使用CSS3多背景：一个顶部（不重复），中间部分（1px的片重复做容器“扩张”），和底部（不重复）。我遇到的问题是中间部分重复，覆盖顶部和底部。在IE9，FF6和Chrome中也是如此。这里是我的代码：使用CSS3多重背景只有一个重复

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

答

把你的页面使用了标签<div>，以及有关图像应用到每个<div>的background-image属性。这样，您可以为后台重复指定不同的属性值。

嗯，为什么在这个世界上我没有想到那个？谢谢 – nmn5811

答

您可以创建为每个单独的指定背景三个独立的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多重背景只有一个重复

相关推荐