? ? 背景
? ? ? ? 1 背景顏色
? ? ? ? 2 背景圖片
? ? ? ? 3 背景平鋪
? ? ? ? 4 背景位置
? ? ? ? 5 背景相關(guān)屬性連寫
? ? ? ? 6（拓展）img標(biāo)簽和背景圖片的區(qū)別
? ? ? ? ? ? 1 背景顏色
? ? ? ? ? ? 屬性名：background-color
? ? ? ? ? ? 取值；關(guān)鍵字、rgb表示法、rgba表示法、十六進(jìn)制
? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? 1 背景顏色默認(rèn)值是透明：rbga(0,0,0,0)、transparent
? ? ? ? ? ? ? ? 2 背景顏色不會(huì)影響盒子大小，并且還能看清盒子的大小和位置，一般在布局中會(huì)習(xí)慣先給盒子設(shè)置背景顏色?
? ? ? ? ? ? 2 背景圖片
? ? ? ? ? ? ? ? 屬性名：background-image
? ? ? ? ? ? ? ? 取值：url("圖片路徑")
? ? ? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? ? ? 1 背景圖片中url中可以省略引號(hào)
? ? ? ? ? ? ? ? ? ? 2 背景圖片默認(rèn)是在水平和垂直方向平鋪的
? ? ? ? ? ? ? ? ? ? 3 背景圖片僅僅是指給盒子起到裝飾效果，類似于背景顏色，是不能撐開盒子的
? ? ? ? ? ??
? ? ? ? ? ? 3 背景平鋪
? ? ? ? ? ? ? ? 屬性名：background-repeat
? ? ? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? ? ? 1 repeat? ? ?水平和垂直方向都平鋪(默認(rèn))
? ? ? ? ? ? ? ? ? ? 2 no-repeat? 不平鋪
? ? ? ? ? ? ? ? ? ? 3 repeat-x? ?水平平鋪?
? ? ? ? ? ? ? ? ? ? 4 repeat-y? ?垂直平鋪?
? ? ? ? ? ??
? ? ? ? ? ? 4 背景位置
? ? ? ? ? ? ? ? 屬性名：background-position
? ? ? ? ? ? ? ? 取值：background-position:水平方向 垂直方向；
? ? ? ? ? ? ? ? ? ? 1 方位名詞(兩兩組合可以表示9個(gè)位置)
? ? ? ? ? ? ? ? ? ? ? ? 水平方向 左(left) 中(center) 右(right)
? ? ? ? ? ? ? ? ? ? ? ? 垂直方向 上(top) 中(center) 下(bottom)
? ? ? ? ? ? ? ? ? ? 2 數(shù)組+px(坐標(biāo)表示)
? ? ? ? ? ? ? ? ? ? ? ? 原點(diǎn)(0,0) 盒子的左上角? x軸? y軸
? ? ? ? ? ? ? ? ? ? ? ? 注意：數(shù)值為正 正方向移動(dòng)，數(shù)值為負(fù) 反方向移動(dòng)
? ? ? ? ? ? ? ? 注意：無論是背景圖片還是背景顏色都只在盒子里顯示
? ? ? ? ? ? ? ??
? ? ? ? ? ? 5 背景相關(guān)屬性連寫
? ? ? ? ? ? ? ? 屬性名：background
? ? ? ? ? ? ? ? 連寫：background：color image repeat position
? ? ? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? ? ? 1 單個(gè)屬性值的合寫，取值之間以空格隔開
? ? ? ? ? ? ? ? ? ? 2 書寫順序不分先后，但推薦上述寫法
? ? ? ? ? ? ? ? ? ? 3 取值個(gè)數(shù)可以按照需求省略
? ? ? ? ? ? ? ? ? ? 4 特殊情況：在pc端，如果盒子大小和背景圖片大小一樣，此時(shí)可以直接寫 background：url()
? ? ? ? ? ? 6（拓展）img標(biāo)簽和背景圖片的區(qū)別
? ? ? ? ? ? ? ? 需求：需要在網(wǎng)頁中展示一張圖片的效果？
? ? ? ? ? ? ? ? ? ? 方法一：直接寫上img標(biāo)簽即可
? ? ? ? ? ? ? ? ? ? ? ? img標(biāo)簽是一個(gè)標(biāo)簽，不設(shè)置寬高默認(rèn)會(huì)以原尺寸顯示
? ? ? ? ? ? ? ? ? ? 方法二：div標(biāo)簽 + 背景圖片
? ? ? ? ? ? ? ? ? ? ? ? 需要設(shè)置div的寬高，因?yàn)楸尘皥D片只是裝飾的CSS樣式，不能撐開div標(biāo)簽
? ? ? ? ? ? ? ? 使用：
? ? ? ? ? ? ? ? ? ? 不經(jīng)常更換的用背景圖
? ? ? ? ? ? ? ? ? ? 經(jīng)常更換的用img圖片
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { /* 盒子寬800px 高800px */ width: 800px; height: 800px; /* 字體大小 50px */ font-size: 50px; /* 背景色 pink */ /* background-color: pink; */ /* 背景圖 1.jpg */ /* background-image: url("images/1.jpg"); */ /* 背景平鋪 默認(rèn) */ /* background-repeat: no-repeat; */ /* 背景圖位置 居中 */ /* background-position: center center; */ /* 連寫 顏色 圖片 平鋪 位置 */ background: pink url("images/1.jpg") no-repeat center; } </style> </head> <body> <div> 背景Demo </div> </body> </html>效果圖：文章來源：http://www.zghlxwxcb.cn/news/detail-501283.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-501283.html
到了這里，關(guān)于CSS3-背景的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
