【温故知新】CSS学习笔记（背景）
CSS背景
1、background-color：背景色；
例如：background-color: #000;
外部鏈接 ：CSS顏色表
?
2、background-image：背景圖片；
例如：background-image: url(images/ms.jfif);
外部鏈接 ：相對位置與絕對位置
?
3、background-repeat：設(shè)置背景圖像如何鋪排；
- ?????? repeat：背景圖像在縱向和橫向上平鋪（默認(rèn)）；
- ?????? no-repeat:背景圖像不平鋪；
- ?????? repeat-x:背景圖像在橫向上平鋪；
- ?????? repeat-y:背景圖像在縱向上平鋪；
例如：background-repeat: no-repeat;
?
4、background-position：設(shè)置背景圖像的位置；
- Position后面可以跟方位名稱，他們之間沒有前后順序；
?????? 上：top
?????? 下：bottom
?????? 左：left
?????? 右：right
例如 ：
background-position：center center； 水平垂直居中
?background-position：center top； 水平居中靠上，一般游戲網(wǎng)頁背景大圖會使用這個方式；
?
- Position如果只寫一個值，另外一個則默認(rèn)是據(jù)中的；
例如：
background-position：right；
background-position：bottom；
?
- Position后面同樣可以跟精確值（px），但是必須有順序，先X軸后Y軸；
例如：background-position：12px 50px;
?
- Position后面可以同時跟方位名詞和精確值，但是還是需要注意順序；
例如：
background-position：12px center;
或者background-position：12px ;
?
5、background-attachment：設(shè)置背景圖像內(nèi)容是滾動的還是固定的；
- ?????? Scroll:背景圖像是隨對象內(nèi)容滾動的（默認(rèn)）；
- ?????? Fixed:背景圖像是固定的；
例如：background-attachment: fixed;
?
【綜合樣例代碼】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>魔獸世界懷舊版</title><style>body {background-image: url(images/ms.jfif);background-position: center top;background-repeat: no-repeat;background-color: #000;background-attachment: fixed;}</style> </head> <body></body> </html>便捷方式- background簡寫
屬性值的書寫順序沒有強(qiáng)制的標(biāo)準(zhǔn)，但是為了可讀性，建議如下寫書：
Background：背景顏色 ?背景圖片地址 ?背景平鋪 ?背景滾動 ?背景位置
上面樣例就可以簡寫成如下形式：
background: #000 url(images/ms.jpg) no-repeat fixed center top；
?
?
總結(jié)
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（背景）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（三大特性）
- 下一篇： 【温故知新】CSS学习笔记（盒子边框介绍