背景相關(guān)屬性
背景顏色
。如何設(shè)置標(biāo)簽的背景顏色？
。在css中可以通過(guò)background-color：屬性設(shè)置標(biāo)簽的背景顏色
。取值
具體單詞
rgb
rgba
十六進(jìn)制
<style>
div{
width: 100px;
height: 50px;
}
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,0);
}
.box3{
background-color: rgba(0,0,255,0.7);
}
.box4{
background-color: #0ff;
}
</style>
快捷鍵
。bc backkground-color:#ff；
背景圖片
如何設(shè)置圖片
在CSS可以通過(guò)background-image: url();設(shè)置背景圖片
格式:
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
/background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);/
}
</style>
<div class="box1"></div>
注意點(diǎn)：
1圖片的地址必須放在url()中，圖片的地址可以是本地地址，也可以是網(wǎng)絡(luò)的地址
2如果圖片的大小沒(méi)有標(biāo)簽的大小大，那么會(huì)自動(dòng)在水平和垂直方向平鋪來(lái)填充
3如果網(wǎng)頁(yè)上出現(xiàn)了圖片，那么瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片
快捷鍵：
。bi background-image:wrl()；
背景平鋪
如何控制背景圖片的平鋪方式？
在css中可以通過(guò)background-repeat屬性控制背景圖片的平鋪方式的
取值：
repeat 默認(rèn), 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
格式:
<style>
/*
div{
width: 500px;
height: 500px;
}
.box1{
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: repeat-y;
}
</style>
<div class="box1"></div>
應(yīng)用場(chǎng)景：
可以通過(guò)背景圖片的平鋪來(lái)降低圖片的大小，提升網(wǎng)頁(yè)的訪問(wèn)速度
可以將多張圖片拼接成一張圖片
注意點(diǎn)
背景顏色和背景圖片可以共存，圖片會(huì)覆蓋顏色
快捷鍵：
bgr backgroun-position：
背景定位
如何控制背景圖片的位置？
在css中有一個(gè)叫做backg-position：屬性，就是專門(mén)用于控制背景圖片的位置
格式：
background-position: 水平方向 垂直方向;
取值:
具體的方位名詞
水平方向: left center right
垂直方向: top center bottom
<style>
div{
/width: 500px;/
height: 500px;
}
.box1{
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
/background-position: left top;/
/background-position: right top;/
/background-position: right bottom;/
/background-position: left bottom;/
/background-position: center center;/
/background-position: left center;/
background-position: center top;
}
</style>
<div class="box1"></div>
具體的像素
例如: background-position: 100px 200px;
記住一定要寫(xiě)單位, 也就是一定要寫(xiě)px
記住具體的像素是可以接收負(fù)數(shù)的
<style>
div{
/width: 500px;/
height: 500px;
}
.box1{
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
/background-position: 100px 0;/
/background-position: 100px 200px;/
background-position: -100px -100px;
}
</style>
應(yīng)用場(chǎng)景：
當(dāng)圖片比較大的時(shí)候，可以通過(guò)定位屬性保證圖片永遠(yuǎn)居中顯示
快捷鍵：
bp background-position: 0 0;
背景屬性連寫(xiě)
和font屬性一樣，background屬性也可以連寫(xiě)
背景屬性縮寫(xiě)格式
background：背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式：
注意點(diǎn)：
background屬性中，任何一個(gè)屬性都可以被省略
快捷鍵：
bg+ background: #fff url() 0 0 no-repeat;
背景關(guān)聯(lián)
什么是背景關(guān)聯(lián)方式？
默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，如果不想讓背景圖片隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，那么我們就可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式
如何修改背景關(guān)聯(lián)方式？
在css中有一個(gè)叫做background-attachment的屬性，這個(gè)屬性就是專門(mén)用于修改關(guān)聯(lián)方式的
格式
background-attachment：scroll;
取值
scroll默認(rèn)值，會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
fixed不會(huì)隨這滾動(dòng)條的滾動(dòng)而滾動(dòng)
快捷鍵：
ba background-attachment:;
插入圖片和背景圖片的區(qū)別
1
背景圖片僅僅是一個(gè)裝飾，不會(huì)占用位置
插入圖片會(huì)占用位置
2
背景圖片有定位屬性，所以可以很方便的控制圖片的位置。
插入圖片沒(méi)有定位屬性，所有控制圖片的位置不太方便
3
插入圖片的語(yǔ)義比背景圖片的語(yǔ)義要強(qiáng)，所以在企業(yè)開(kāi)發(fā)中如果你的圖片想被搜索引擎收錄，那么推薦使用插入圖片
