CSS 之背景（Background）
一、属性
| Properties 属性 | Description 简介 |
|---|---|
| background | 复合属性。设置或检索对象的背景特性 |
| background-color | 设置或检索对象的背景颜色 |
| background-image | 设置或检索对象的背景图像 |
| background-repeat | 设置或检索对象的背景图像如何铺排填充 |
| background-attachment | 设置或检索对象的背景图像是随对象内容滚动还是固定的 |
| background-position | 设置或检索对象的背景图像位置 |
| background-origin | 设置或检索对象的背景图像显示的原点 |
| background-clip | 检索或设置对象的背景向外裁剪的区域 |
| background-size | 检索或设置对象的背景图像的尺寸大小 |
二、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> h1 { font-size: 20px; } h2 { font-size: 16px; } p { width: 200px; height: 200px; margin: 0; padding: 20px; border: 10px dashed #666; background: #aaa url(skin/p_103x196_1.jpg) no-repeat; } .border-box p { background-clip: border-box; } .padding-box p { background-clip: padding-box; } .content-box p { background-clip: content-box; } .text p { width: auto; height: auto; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 120px; } </style> </head> <body> <h1>background-clip</h1> <ul class="test"> <li class="border-box"> <h2>border-box</h2> <p>从border区域（不含border）开始向外裁剪背景</p> </li> <li class="padding-box"> <h2>padding-box</h2> <p>从padding区域（不含padding）开始向外裁剪背景</p> </li> <li class="content-box"> <h2>content-box</h2> <p>从content区域开始向外裁剪背景</p> </li> <li class="text"> <h2>text</h2> <p>从前景内容的形状作为裁剪区域向外裁剪背景</p> </li> </ul> </body> </html>
