(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>