javascript
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景設置
HTML頁面中的背景是通過background設置的。
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1000px;height: 300px;/* 使用background-color可以設置背景顏色 */background-color: chartreuse;}.x1{width: 1000px;height: 300px;/* 也可以使用縮寫 */background:red;}</style> </head> <body><div></div><div class="x1"></div> </body> </html>在背景設置中，有多種參數可選
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
其中，color可以直接寫顏色（red，green等），也可以寫rgba值
image是使用圖片作為背景，使用語法：background-image: url(01.jpg);
repeat是設置背景圖重復，通常有4種選項:repeat、no-repeat、repeat-x、repeat-y，分別意思是重復，不重復，在x軸上重復，在y軸重復
attachment是設置背景滾動的，有兩個屬性值：
?????scroll：背景圖片跟隨滾動
?????fixed：背景固定在可視區域（不隨頁面滾動）
position是設置背景位置,有7個屬性值：
?????length，設置背景圖片與頁面邊距的水平和垂直方向的距離(單位：px、cm、mm等)
?????percentage，根據頁面的寬高百分比設置背景
?????top，設置背景圖片頂部居中顯示
?????center，設置背景圖片居中顯示
?????bottom，設置背景圖片底部居中顯示
?????left，設置背景圖片左對齊
?????right，設置背景圖片右對齊
CSS3新屬性
- background-clip（指定背景的顯示范圍）
- background-origin（指定背景圖片的起點）
- background-size（指定背景圖片的大小）
要想理解這幾個屬性，先要有一個概念，頁面中每一個元素其實都是如下結構：
糾正一下，內容區應該是content，不是center
如果明白了這個概念以后就很好解釋了。
background-clip
背景的顯示范圍。有三種取值：
?????border-box（從border向外裁剪，不含border，即從border和外邊距的交界開始，往外面沒有背景）
?????padding-box（從padding向外裁剪，不含padding，即從padding和外邊距的交界開始，往外面沒有背景）
?????content-box（從內容區content往外裁剪）
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{float: left;width: 200px;height: 200px;margin: 20px;padding: 20px;border: 10px dotted black;background: url(./img/01.jpg) no-repeat;}.x1{background-clip: border-box;}.x2{background-clip: padding-box;}.x3{background-clip: content-box;}</style> </head> <body><div class="x1"><img src="./img/micc.jpg" width="100px" alt=""><p>這是border-box</p></div><div class="x2"><img src="./img/micc.jpg" width="100px" alt=""><p>這是padding-box</p></div><div class="x3"><img src="./img/micc.jpg" width="100px" alt=""><p>這是content-box</p></div> </body> </html>示例圖：
background-origin
背景的起點，有三個取值：
?????border-box（從border開始，含border）
?????padding-box（從padding開始，含padding）
?????content-box（從內容區content開始）
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{float: left;width: 200px;height: 200px;margin: 20px;padding: 20px;border: 10px dotted black;background: url(./img/01.jpg) no-repeat;}.x1{background-origin: border-box;}.x2{background-origin: padding-box;}.x3{background-origin: content-box;}</style> </head> <body><div class="x1"><img src="./img/micc.jpg" width="100px" alt=""><p>這是border-box</p></div><div class="x2"><img src="./img/micc.jpg" width="100px" alt=""><p>這是padding-box</p></div><div class="x3"><img src="./img/micc.jpg" width="100px" alt=""><p>這是content-box</p></div> </body> </html>效果圖：
background-size
背景的大小，有四種取值：
兩個數值或者百分比：背景的寬、高（可以只給一個數值，即為寬，高度等比縮放）
auto：背景圖的原始尺寸
cover：背景圖拉伸縮放至容器大小，寬高都要達到大小，有可能圖片超出容器
contain：背景圖的寬或者高拉伸到容器大小，保證圖片都在容器內
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{float: left;width: 200px;height: 200px;margin: 20px;padding: 20px;border: 10px dotted black;background: url(./img/01.jpg) no-repeat;}.x1{background-size: 200px;}.x2{background-size: 50%;}.x3{background-size: auto;}.x4{background-size: cover;}.x5{background-size: contain;}</style> </head> <body><div class="x1"><img src="./img/micc.jpg" width="100px" alt=""><p>這是200px</p></div><div class="x2"><img src="./img/micc.jpg" width="100px" alt=""><p>這是50%</p></div><div class="x3"><img src="./img/micc.jpg" width="100px" alt=""><p>這是auto</p></div><div class="x4"><img src="./img/micc.jpg" width="100px" alt=""><p>這是cover</p></div><div class="x5"><img src="./img/micc.jpg" width="100px" alt=""><p>這是contain</p></div> </body> </html>效果圖：
多背景圖
在CSS3中沒有單獨設置什么屬性可以達到多背景圖的效果，但是可以同background-image設置多個圖，分別設置圖片的不同位置即可實現多背景圖
語法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 500px;height: 500px;margin: 0 auto;}.x1{background-color: cornflowerblue;background-image:url(./img/01.jpg),url(./img/w1.jpg),url(./img/w0.jpg);background-repeat: no-repeat;background-size: 100px;background-position: top,center,bottom;}</style> </head> <body><div class="x1"></div> </body> </html>效果圖：
總結
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： HTML+CSS+JavaScript复