CSS背景(background)

目標

• 理解
  • 背景的語法和作用
  • CSS背景圖片和插入圖片的區別
• 應用
  • 通過CSS背景屬性,給頁面元素添加背景樣式
  • 能設置不同的背景圖片位置

1.背景顏色

• 語法:

  background-color: 顏色值; 默認值是 transparent 透明的
  

2.背景圖片(image)

• 語法:

  background-image: none | url(url)
  

background-image: url(images/demo.png);

• 小技巧: 我們提倡 背景圖片后面的地址,url不要加引號

3.背景平鋪(repeat)

• 語法:

  background-repeat: repeat | no-repeat | repeat-x | repeat-y
  

  參數	作用
  repeat	背景圖像在縱向和橫向上平鋪(默認)
  no-repeat	背景圖像不平鋪
  repeat-x	背景圖像在橫向上平鋪
  repeat-y	背景圖像在縱向上平鋪

4.背景位置(position)

• 語法:

  background-position: length || length
  
  background-position: position || position
  

  參數	值
  length	百分數 | 由浮點數字和單位標識符組成的長度值
  position	top | center | bottom | left | center | right 方位名詞

• 注意:

  • 必須先指定background-image屬性
  • position后面是x坐標和y坐標。可以使用方位名詞或者精確單位
  • 如果指定兩個值,兩個值都是方位名詞,則兩個值前后順序無關,比如 left top 和 top left 效果一致
  • 如果只指定了一個方位名詞,另一個值默認居中對齊
  • 如果position后面是精確坐標,那么第一個肯定是x第二個肯定是y
  • 如果只指定一個數值,那該數值一定是x坐標,另一個默認垂直居中
  • 如果指定的兩個值是精確單位和方位名詞混合使用,則第一個值是x坐標,第二個值是y坐標
  • 如果一個元素上既有背景顏色也有背景圖片,那么背景圖片會在背景顏色上面顯示

5.背景附著

• 背景附著就是解釋背景是滾動的還是固定的(當有滾動條的時候,背景會不會跟誰滾輪的滾動,背景也跟著滾動)

• 語法:

  background-attachment: scroll | fixed
  

6.背景簡寫

• background: 屬性的值的書寫順序官方沒有強制標準的。為了可讀性,建議如下寫:

• background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;

• 語法:

  background: transparent url(image.jpg) repeat scroll left top;
  

• 重點: 如果采用簡寫的形式,如果不寫某些屬性,系統默認采用默認值

7. 背景透明(CSS3)

• 語法:

  background: rgba(0, 0, 0, 0.3);
  

• rgba r 紅色 g 綠色 b 藍色 a 透明度

• 最后一個參數是alpha - 透明度 取值范圍 0 ~ 1 之間

• 我們習慣把0.3的0省略掉

• 注意: 背景半透明是指盒子背景半透明,盒子里面的內容不受影響

• 因為是CSS3,所以低于ie9的版本是不支持的

透明度: opacity: 0(透明) ~ 1(不透明); 0.5(半透明)
注: 如果指定opacity為0,雖然當前元素被設置為透明,但是還是占位置的;里面所有的子內容也會透明

8 背景總結