1. 程式人生 > >css3背景

css3背景

背景圖 技術分享 多個 計算 color 大小 right gin inf

  background-image:添加背景圖片

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif);     //路徑,背景圖可以是多個
    background-position: right bottom, left top;           //背景圖的定位
    background-repeat: no-repeat, repeat;               //是否重復
}

  background-size:背景圖的大小

  • length:設置背景圖片高度和寬度。第一個值設置寬度,第二個值設置的高度。如果只給出一個值,第二個是設置為 auto(自動)
  • percentage:將計算相對於背景定位區域的百分比。第一個值設置寬度,第二個值設置的高度。如果只給出一個值,第二個是設置為"auto(自動)"
  • cover:此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小
    • 填充滿
  • contain:此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小
    • 等比縮放

  background-Origin:指定了背景圖像的位置區域

  技術分享圖片

css3背景