33-背景色彩

1.如何設置標簽的背景色彩?

在CSS中有1個background-color:屬性, 就是專門用來設置標簽的背景色彩的

取值:
具體單詞
rgb
rgba
106進制

快捷鍵:

bc background-color: #fff;

34-背景圖片

1.如何設置背景圖片?

在CSS中有1個叫做background-image: url();的屬性, 就是專門用于設置背景圖片的

快捷鍵:

bi background-image: url();

注意點:

1.圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也能夠是網絡的地址
2.如果圖片的大小沒有標簽的大小大, 那末會自動在水平和垂直方向平鋪來填充
3.如果網頁上出現了圖片, 那末閱讀器會再次發送要求獲得圖片

35-背景平鋪屬性

1.如何控制背景圖片的平鋪方式?

在CSS中有1個background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的

取值:
repeat 默許, 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪

快捷鍵

bgr background-repeat:

利用場景:
可以通過背景圖片的平鋪來下降圖片的大小, 提升網頁的訪問速度

36-背景定位屬性

1.如何控制背景圖片的位置?

在CSS中有1個叫做background-position:屬性, 就是專門用于控制背景圖片的位置

2.格式:

background-position: 水平方向 垂直方向;

3.取值

3.1具體的方位名詞

水平方向: left center right
垂直方向: top center bottom

2.2具體的像素

例如: background-position: 100px 200px;

記住1定要寫單位, 也就是1定要寫px
記住具體的像素是可以接收負數的

快捷鍵:

bp background-position: 0 0;

注意點:

同1個標簽可以同時設置背景色彩和背景圖片, 如果色彩和圖片同時存在, 那末圖片會覆蓋色彩

37-背景縮寫

1.背景屬性縮寫的格式

background: 背景色彩 背景圖片 平鋪方式 關聯方式 定位方式;

快捷鍵:

bg+ background: #fff url() 0 0 no-repeat;

2.注意點：

background屬性中， 任何1個屬性都可以被省略

3.甚么是背景關聯方式？

默許情況下背景圖片會隨著轉動條的轉動而轉動， 如果不想讓背景圖片隨著轉動條的轉動而轉動， 那末我們就能夠修改背景圖片和轉動條的關聯方式

4.如何修改背景關聯方式？

在CSS中有1個叫做background-attachment的屬性， 這個屬性就是專門用于修改關聯方式的

格式

background-attachment：scroll;

取值：
scroll 默許值， 會隨著轉動條的轉動而轉動
fixed 不會隨著轉動條的轉動而轉動

快捷鍵:
ba background-attachment:;

38-背景圖片和插入圖片區分

1.背景圖片和插入圖片區分?

1.1

背景圖片僅僅是1個裝潢, 不會占用位置
插入圖片會占用位置

1.2

背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
插入圖片沒有定位屬性, 所有控制圖片的位置不太方便

1.3

插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜索引擎收錄, 那末推薦使用插入圖片

40-CSS精靈圖

1.甚么是CSS精靈圖

CSS精靈圖是1種圖象合成技術

2.CSS精靈圖作用

可以減少要求的次數, 和可以下降服務器處理壓力

3.如何使用CSS精靈圖

CSS的精靈圖需要配合背景圖片和背景定位來使用