区别纯修饰图片和图片标签
body{
background-image:url(/img/patten.gif) /*默认情况下，浏览器会水平、垂直地重复显示背景图片*/
}
background-repeat:repeat-x;
背景图片总出现在背景颜色上面，可以利用这个特点实现些功能:
图片高度一定，当内容高度超过图片高度，颜色渐变就会停止，这时只需给背景加一个图片底部色即可，那么颜色间的转变就看不出来了
body{
backgrond-image:url();
background-repeat:repeat-x;
background-color:#ccc;
}
如果图片是纯表现性的，就从文档中剥离出来吧。
例如希望在网页开头显示一个大得品牌图片，只需在Html中给这个图片创建一个钩子
#branding{
width:700px;
height:200px;
background-image:...;
background-repeat:no-repeat;
}
background-position: left center; /*同百分比定位一样：样式结果 = 元素和背景图片两者的坐标(left,center)重叠*/
background-position: 20px 20px; /* 样式结果 = 背景图片的(0,0)与元素(20, 20)重叠*/
规范指出：不要将px 或 % 等单位 与 关键字center 合用
设置background属性的简写：
background: #ccc url() no-repeat left center
固定宽度支持高度可变的圆角
灵活的圆角框
用四张背景图片实现水平、垂直可扩展的圆角框
添加了几个额外的标签
<style type="text/css">
.outer {
width: 20em;
background: url(img/bottom-left.gif) no-repeat left bottom;
}
.inner2{
background: url(img/bottom-right.gif) no-repeat right bottom;
}
.inner{
background: url(img/top-left.gif) no-repeat left top;
padding-bottom:1em;
}
h2{
background: url(img/top-right.gif) no-repeat right top;
padding-top:1em;
}
h2, p{
padding-left:1em;
padding-right:1em;
}
</style>
<div class="outer">
<div class="inner2">
<div class="inner">
<h2>title</h2>
<p>
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊1
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊2
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊3
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊4
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊5
</p>
</div>
</div>
</div>
实现以上效果也可以用山角顶
css3多背景特性
background-image:url(img/mtop-left.gif),
url(img/mtop-right.gif),
url(img/mbottom-left.gif),
url(img/mbottom-right.gif);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
border-radius
可以画一个圆
<div style="width:10em;height:10em;border-radius:50%;background-color:red;"></div>
border-image: border支持图片，用法较难，暂放
图像投影：
此方法利用两个背景，那还不如用一个背景，也就是投影背景图，效果不好。
<div class="img-wrapper">
<div>
<img src="img/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>
</div>