css背景設置

一、 背景顏色

• background-color:後面跟顏色屬性

二、 背景圖片

• background-image
  屬性容許指定一個圖片展現在背景中（只有CSS3才能夠多背景）能夠和 background-color 連用。 若是圖片不重複的話，圖片覆蓋不到地地方都會被背景色填充。 若是有背景圖片平鋪，則會覆蓋背景顏色。
• 參數
  • none：無背景（默認）
  • url：使用絕對或相對地址指定背景圖像

三、 背景平鋪

• 即所選背景圖片是否填充整個樣式區域
• 語法

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

• 參數
  • repeat : 　背景圖像在縱向和橫向上平鋪（默認的）
  • no-repeat : 　背景圖像不平鋪
  • repeat-x/y : 　背景圖像在橫向/縱向上平鋪

四、 背景位置

• 調整背景圖片在區域內的樣式
• 語法

  background-position : x座標 y座標

• 參數
  • 使用top bottom left right center定位，沒有順序

    background-position: top left;    // 左上角
    background-position: top;            //只寫一個默認另外一邊居中

  • 直接寫像素

    background-position: 12px 30px    // x，y軸順序

五、 背景附着

• 設置背景是隨內容滾動仍是固定
• background-attachment
• 參數
  • scroll：滾動
  • fixed：固定

以上背景能夠簡寫，相似padding或margn屬性同樣，按照順序便可

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

六、背景透明(CSS3)

• CSS3支持背景半透明的寫法語法格式是:
  • background: rgba(0,0,0,0.3); 最後一個參數是alpha 透明度 取值範圍 0~1之間 注意： 背景半透明是指盒子背景半透明， 盒子裏面的內容不收影響。