【温故知新】CSS学习笔记(背景)
CSS背景
1、background-color:背景色;
例如:background-color: #000;
外部鏈接 :CSS顏色表
?
2、background-image:背景圖片;
例如:background-image: url(images/ms.jfif);
外部鏈接 :相對位置與絕對位置
?
3、background-repeat:設置背景圖像如何鋪排;
- ?????? repeat:背景圖像在縱向和橫向上平鋪(默認);
- ?????? no-repeat:背景圖像不平鋪;
- ?????? repeat-x:背景圖像在橫向上平鋪;
- ?????? repeat-y:背景圖像在縱向上平鋪;
例如:background-repeat: no-repeat;
?
4、background-position:設置背景圖像的位置;
- Position后面可以跟方位名稱,他們之間沒有前后順序;
?????? 上:top
?????? 下:bottom
?????? 左:left
?????? 右:right
例如 :
background-position:center center; 水平垂直居中
?background-position:center top; 水平居中靠上,一般游戲網頁背景大圖會使用這個方式;
?
- Position如果只寫一個值,另外一個則默認是據中的;
例如:
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:設置背景圖像內容是滾動的還是固定的;
- ?????? Scroll:背景圖像是隨對象內容滾動的(默認);
- ?????? 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簡寫
屬性值的書寫順序沒有強制的標準,但是為了可讀性,建議如下寫書:
Background:背景顏色 ?背景圖片地址 ?背景平鋪 ?背景滾動 ?背景位置
上面樣例就可以簡寫成如下形式:
background: #000 url(images/ms.jpg) no-repeat fixed center top;
?
?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记(背景)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【温故知新】CSS学习笔记(三大特性)
- 下一篇: CSS 基本样式