一：背景顏色
背景顏色一共有四種取值方式军拟，分別為具體顏色值單詞，rgb迁霎，rgba以及十六進(jìn)制具體如下所示：
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,100);
}
.box3{
background-color:rgba(0,22,232,0.7);
}
.box4{
background-color:#0ff;
}
<!--
background-color的取值:
1.background-color的取值和color一樣
具體單詞
rgb
rgba
十六進(jìn)制
-->
二：背景圖片
如何設(shè)置背景圖片呢辛馆？俺陋？
CSS中有一個(gè)叫做background-image:url();的屬性就是專門用于設(shè)置背景圖片的
注意點(diǎn)：
1.圖片的地址必須放在URL()中，圖片的地址可以是本地地址也可以是網(wǎng)絡(luò)地址
2.如果圖片的大小沒有標(biāo)簽的大小大昙篙，那么會(huì)自動(dòng)在水平或者垂直方向填充
3.如果網(wǎng)頁上出現(xiàn)了圖片腊状，那么瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片
三：背景平鋪
如何控制背景圖片的平鋪方式？
在CSS中有個(gè)background-repeat屬性苔可，就是專門用于控制背景圖片的平鋪方式的
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(../images/logo@2x.png);
background-repeat:repeat-x;
}
div{
width: 980px;
height: 50px;
}
平鋪的取值：
repeat：默認(rèn)在水平和垂直方向都平鋪
no-repeat: 在水平和垂直方向都不平鋪
repeat-x: 只在水平方向平鋪
repeat-y：只在垂直方向平鋪
應(yīng)用場景：
可以通過背景圖片的平鋪來降低圖片的大小缴挖，提升網(wǎng)頁的訪問速度
三：背景定位
如何控制背景圖片的位置？
background-position: 0 0;
具體方位名詞 具體的像素
.box1{
background-color: red;
background-image: url(../images/logo@2x.png);
background-repeat:no-repeat;
/*background-position: right top;*/
background-position: 100px 200px;
}
格式：background-position：水平方向 垂直方向焚辅；
取值：
水平方向： left right center
垂直方向： top center bottom
注意點(diǎn)：
同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色盒背景圖片映屋，如果顏色和圖片同時(shí)存在，圖片會(huì)覆蓋顏色
具體像素：
background-position： 10px 100px同蜻；
注意：一定要寫單位
四： 背景關(guān)聯(lián)和縮寫
背景關(guān)聯(lián)：
格式：
background-attachment：scroll棚点；
默認(rèn)為scroll，會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
background-attachment：fixed湾蔓；
不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
注意點(diǎn)：
background屬性中瘫析，任何一個(gè)屬性都可以省略默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，那么我們就可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式
div{
width: 500px;
height: 500px;
/*background-color: red;
background-image: url(../images/logo@2x.png);
background-repeat:no-repeat;
background-position: left bottom;*/
/* background：背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式*/
background: red url(../images/logo@2x.png) no-repeat left bottom;
}
body{
background-image: url(../images/logo@2x.png);
background-repeat:no-repeat;
/*background-attachment:scroll;*/
background-attachment:fixed;
}
五：背景圖片和插入圖片的區(qū)別
區(qū)別：
1.背景圖片僅僅是一個(gè)裝飾，不會(huì)占用位置
出入圖片會(huì)占用位置
2. 背景圖片有定位屬性贬循，所以很方便的控制圖片的位置
插入圖片沒有定位屬性咸包，所以控制圖片的位置不太方便
3. 插入圖片的語義比背景圖片的語義要強(qiáng)，所以在開發(fā)中如果你的圖片想被搜索引擎收錄杖虾，那么推薦使用插入圖片
<div class="box2"></div>
六：精靈圖片
1. 什么是CSS精靈圖
一種圖像的合成技術(shù)
2.作用
可以減少請(qǐng)求的次數(shù)以及降低服務(wù)器處理的壓力
3.如何使用
CSS精靈圖片需要配合背景圖片和背景定位來使用
<style>
div{
background-image: url("../new_year_head.png");
}
.box1{
width: 80px;
height: 60px;
background-position: -800px -100px;
display: inline-block;
}
.box2{
width: 80px;
height: 60px;
background-position: -800px -100px;
display: inline-block;
}
.box3{
width: 80px;
height: 60px;
background-position: -600px -100px;
display: inline-block;
/*行內(nèi)塊級(jí)元素*/
/*為了能夠讓元素既能夠不獨(dú)占一行,又可以設(shè)置寬度和高度*/
/*那么就出現(xiàn)了行內(nèi)塊級(jí)元素*/
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>