1. 程式人生 > >css背景設置

css背景設置

直接 填充 12px 展示 背景透明 -c 範圍 none att

1、 背景顏色

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

2、 背景圖片

  • background-image
    屬性允許指定一個圖片展示在背景中(只有CSS3才可以多背景)可以和 background-color 連用。 如果圖片不重復的話,圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪,則會覆蓋背景顏色。
  • 參數
    • none:無背景(默認)
    • url:使用絕對或相對地址指定背景圖像

3、 背景平鋪

  • 即所選背景圖片是否填充整個樣式區域
  • 語法
    background-repeat : repeat | no-repeat | repeat-x | repeat-y 
  • 參數
    • repeat :  背景圖像在縱向和橫向上平鋪(默認的)
    • no-repeat :  背景圖像不平鋪
    • repeat-x/y :  背景圖像在橫向/縱向上平鋪

4、 背景位置

  • 調整背景圖片在區域內的樣式
  • 語法
    background-position : x坐標 y坐標
  • 參數
    • 使用top bottom left right center定位,沒有順序
      background-position: top left;    // 左上角
      background-position: top;            //只寫一個默認另一邊居中
    • 直接寫像素
      background-position: 12px 30px    // x,y軸順序

5、 背景附著

  • 設置背景是隨內容滾動還是固定
  • background-attachment
  • 參數
    • scroll:滾動
    • fixed:固定
以上背景可以簡寫,類似padding或margn屬性一樣,按照順序即可

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

6、背景透明(CSS3)

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

css背景設置