背景顏色
- background-color
- 作用：
- 在CSS中background-color:屬性, 就是專門用來設置標簽的背景顏色的
- 取值：
- 具體單詞：
rgb
rgba
十六進制 - 格式：
<style>
div{
width: 100px;
height: 50px;
}
.box1{
background-color: red;
}
</style>
<div class="box1"></div> - 快捷鍵：bc background-color: #fff;
背景圖片
- background-image: url(圖片路徑)
- 作用：在CSS可以通過background-image: url();設置背景圖片
- 格式：
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-image:url(images/girl.jpg)锣笨；
}
</style>
<div class="box1"></div> - 注意：
- 圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網(wǎng)絡的地址
- 如果圖片的大小沒有標簽的大小大, 那么會自動在水平和垂直方向平鋪來填充
- 如果網(wǎng)頁上出現(xiàn)了圖片, 那么瀏覽器會再次發(fā)送請求獲取圖片
- 快捷鍵:
- bi background-image: url();
背景平鋪
- background-repeat
- 作用：
- 在CSS中background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的
- 取值:
- repeat 默認, 在水平和垂直都需要平鋪
- no-repeat 在水平和垂直都不需要平鋪
- repeat-x 只在水平方向平鋪
- repeat-y 只在垂直方向平鋪
- 應用場景:
- 可以通過背景圖片的平鋪來降低圖片的大小, 提升網(wǎng)頁的訪問速度
- 可以將多張圖片拼接成一張圖片
- 注意：
- 背景顏色和背景圖片可以共存, 圖片會覆蓋顏色
- 快捷鍵：bgr background-repeat:
背景定位
- background-position
- 作用：
- 在CSS中background-position:屬性, 就是專門用于控制背景圖片的位置
- 格式:
- background-position: 水平方向 垂直方向;
- 取值:
- 具體的方位名詞
- 水平方向: left center right
- 垂直方向: top center bottom
- 具體的像素
- 例如: background-position: 100px 200px;
- 記住一定要寫單位, 也就是一定要寫px
- 記住具體的像素是可以接收負數(shù)的
- 應用場景:
- 當圖片比較大的時候, 可以通過定位屬性保證圖片永遠居中顯示
背景屬性連寫
- 格式：
- background: 背景顏色 背景圖片 平鋪方式 關聯(lián)方式 定位方式;
- 快捷鍵:
- bg+
background: #fff url() 0 0 no-repeat; - 注意：
- background屬性中决采， 任何一個屬性都可以被省略
背景關聯(lián)
- 什么是背景關聯(lián)方式测垛？
- 默認情況下背景圖片會隨著滾動條的滾動而滾動唇辨， 如果不想讓背景圖片隨著滾動條的滾動而滾動， 那么我們就可以修改背景圖片和滾動條的關聯(lián)方式
- background-attachment
- 作用：在CSS中background-attachment的屬性锉罐， 就是專門用于修改關聯(lián)方式的
- 格式：
- background-attachment：scroll;
- 取值：
- scroll 默認值糊肤， 會隨著滾動條的滾動而滾動
- fixed 不會隨著滾動條的滾動而滾動
- 快捷鍵:
- ba
background-attachment:;
插入圖片和背景圖片的區(qū)別
- 1
- 背景圖片僅僅是一個裝飾, 不會占用位置
- 插入圖片會占用位置
- 2
- 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
- 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
- 3
- 插入圖片的語義比背景圖片的語義要強, 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片
css精靈圖
- 什么是CSS精靈圖
- CSS精靈圖是一種圖像合成技術, 全稱CSS Sprite
- CSS精靈圖作用
- 可以減少請求的次數(shù), 以及可以降低服務器處理壓力
- 如何使用CSS精靈圖
- CSS的精靈圖需要配合背景圖片和背景定位來使用
