（background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> <style type="text/css"> .class1{ width: 400px; height: 550px; border-style: groove; border-color: rgba(235,198,118,0.6); border-width: 10px; padding: 30px; background-image: url(../image/img2.jpg),url(../image/img3.jpg),url(../image/img4.jpg); background-repeat: no-repeat,no-repeat,repeat;/*背景图片不重复*/ background-position: top left,bottom right,top center;/*右下背景图片的位置*/ background-origin: border-box,padding-box,content-box;/*左上背景图片的定位*/ background-clip: border-box,padding-box,content-box; /*中间背景图片裁剪*/ } p{ font-size: 20px; text-indent: 2em;/*首行缩进2个字符*/ line-height: 28px; padding-top: 12px; } </style> </head> <body> <div class="class1"> <p>大家好。这是一个css3添加背景图片的小案例。需要注意的是：1.在添加多个背景的时候，底层的背景图要放在最后面。2，多个背景之间的属性用逗号分割。</p> </div> </body> </html>