简明现代魔法 -> CSS层叠样式表 -> 1像素宽图片做背景

1像素宽图片做背景

2009-11-12

效果如本页的背景，通过 css 的 repeat-x 属性将图片横向叠加，实现背景。

CSS 代码

头部背景

<style type="text/css">
<!--
body{
	/* padding:0px; 
	margin:0px; */ 
	background:url(images/main-bg.gif) 0 0 repeat-x #fff; 
	color:#5F7A77; 
	/* font:13px/19px Arial, Helvetica, sans-serif; */
	}
-->
</style>

底部背景

#footermainPan{
	height:103px; 
	background:url(images/footerbg.gif) 0 0 repeat-x #D3F0F0; 
	color:#2F5958; 
	font:13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; 
	position:relative; 
	margin:0 auto; 
	clear:both; 
	padding:36px 0 0;
	}

小技巧：对于显示一些非正文的文字信息，可以使用 #5F7A77 这个颜色，可以突出正文。