background相關屬性

background-origin: 規定 background-position 屬性相對於容器的哪一部分來定位。orm

  padding-box 背景圖像相對於內邊距框來定位;(默認)圖片

  border-box背景圖像相對於邊框盒來定位;it

  content-box背景圖像相對於內容框來定位。io

background-position:設置背景圖像在容器顯示的起始位置。form

  默認值:0 0(從背景圖的左上點開始顯示);容器

  取值:Int px  Int px;背景圖的左上定點在容器的座標位置,能夠爲負值。負值表示背景圖左上點不在容器內,超出的部分隱藏。引用

  若是隻設置一個值,另外一個值將爲「居中」(50%/center)im

  若是採用百分數,則按以下公式計算座標:top

  x:(容器的寬度—背景圖片的寬度)*x百分比,超出的部分隱藏;y:(容器的高度—背景圖片的高度)*y百分比,超出的部分隱藏。filter

   因此left/top等價於0%,right/bottom等價於100%(背景圖的右邊/底邊和容器重合),center等價於50%(背景圖在容器中間)。

background-size:設置背景圖的大小(IE8不支持此屬性)

  百分比/length:若爲百分數,背景圖的尺寸爲容器乘以百分數的乘積。只設一個,第二個爲auto(以保持和原始背景圖同樣的長寬比例)。

  若是都設爲100%,則背景圖會鋪滿容器,但長寬比率會發生變化。

  contain:容器按背景圖的固定比例包含整個背景圖。背景圖的尺寸以背景圖按固定比例放大,其任意一條邊到達容器的邊界爲止,常常會致使另外一邊空白(有no-repeat時)。

  cover:背景圖按固定長寬比放大,至填充滿整個容器爲止(背景圖短一點的那條邊也到達容器邊界)。有一部分的背景圖會因超出容器而被切除。

IE8兼容:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='絕對路徑',sizingMethod='scale/crop');

  crop : 背景圖大小不變,剪切圖片以適應區域尺寸。

  image : 默認值。增大或減少區域的尺寸邊界以適應背景圖的尺寸,至關於overflow:visible的效果。

  scale : 縮放背景圖以適應區域的尺寸邊界。

  ①不能指定任意大小background百分比②只適於單張圖片不能使用圖片精靈等拼圖③要引用絕對路徑圖片④兼容ie7,8

相關文章
相關標籤/搜索