設(shè)置背景樣式
background-color: #bfa;
設(shè)置背景圖片
使用background-image來(lái)設(shè)置背景圖片
語(yǔ)法：background-image:url(相對(duì)路徑);
- 如果背景圖片大于元素，默認(rèn)會(huì)顯示圖片的左上角
- 如果背景圖片和元素一樣大，則會(huì)將背景圖片全部顯示
- 如果背景圖片小于元素大小，則會(huì)默認(rèn)將背景圖片平鋪以充滿元素
可以同時(shí)為一個(gè)元素指定背景顏色和背景圖片，
這樣背景顏色將會(huì)作為背景圖片的底色
一般情況下設(shè)置背景圖片時(shí)都會(huì)同時(shí)指定一個(gè)背景顏色
background-image:url(1.png);
背景圖片的重復(fù)方式
可選值：
repeat，默認(rèn)值，背景圖片會(huì)雙方向重復(fù)（平鋪）
no-repeat ，背景圖片不會(huì)重復(fù)，有多大就顯示多大
repeat-x， 背景圖片沿水平方向重復(fù)
repeat-y，背景圖片沿垂直方向重復(fù)
background-repeat: repeat-y;
調(diào)整背景圖片在元素中的位置
可選值：該屬性可以使用 top right left bottom center中的兩個(gè)值
來(lái)指定一個(gè)背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個(gè)值，則第二個(gè)值默認(rèn)是center
也可以直接指定兩個(gè)偏移量:
- 第一個(gè)值是水平偏移量
如果指定的是一個(gè)正值，則圖片會(huì)向右移動(dòng)指定的像素
如果指定的是一個(gè)負(fù)值，則圖片會(huì)向左移動(dòng)指定的像素 - 第二個(gè)是垂直偏移量
如果指定的是一個(gè)正值，則圖片會(huì)向下移動(dòng)指定的像素
如果指定的是一個(gè)負(fù)值，則圖片會(huì)向上移動(dòng)指定的像素
background-position: left center;
background-position: 80px 40px;
設(shè)置背景圖片是否隨頁(yè)面一起滾動(dòng)
可選值：
scroll，默認(rèn)值，背景圖片隨著窗口滾動(dòng)
fixed，背景圖片會(huì)固定在某一位置，不隨頁(yè)面滾動(dòng)
不隨窗口滾動(dòng)的圖片，我們一般都是設(shè)置給body，而不設(shè)置給其他元素
背景簡(jiǎn)寫(xiě)
/*設(shè)置一個(gè)背景顏色*/
background-color: #bfa;
/*設(shè)置一個(gè)背景圖片*/
background-image: url(img/3.png);
/*設(shè)置背景不重復(fù)*/
background-repeat: no-repeat;
/*設(shè)置背景圖片的位置*/
background-position: center center;
/*設(shè)置背景圖片不隨滾動(dòng)條滾動(dòng)*/
background-attachment: fixed;
/*簡(jiǎn)寫(xiě)示例*/
background: #bfa url(img/3.png) center center no-repeat fixed;
示例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #bfa url(1.png) center center no-repeat fixed;
}
</style>
</head>
<body style="height: 5000px;">
</body>
</html>
2020-02-19 23.21.40.gif
