以往的(de)背景圖片都是“死的(de)”，換句話(huà)說就是原來(lái)是什(shén)麽樣，那麽我們就無法修改了(le)，這(zhè)裏是指他(tā)的(de)尺寸等，CSS中新引入了(le)Background-size屬性，我們可(kě)以使用(yòng)他(tā)來(lái)給我們的(de)背景添加一些特别的(de)效果。
做(zuò)響應式布局的(de)時(shí)候，如果有背景圖，我們當然希望他(tā)能夠全屏100%顯示，這(zhè)樣顯得(de)頁面非常的(de)爆滿，不過這(zhè)又出現了(le)一個(gè)問題，圖片的(de)尺寸多(duō)大(dà)合适呢(ne)，現在的(de)浏覽器分(fēn)辨率參差不齊，對(duì)于Firefox等高(gāo)級的(de)浏覽器，使用(yòng)Background-size設置爲100%即可(kě)，而IE浏覽器就需要不同設置。
背景100%填充
在Firefox中，隻需要用(yòng)background-size則可(kě)以控制其随容器的(de)大(dà)小而自動伸縮
.picLUp{background:url(logo.png) no-repeat; width:100%;height:40%; background-size:100% 100%;} 在這(zhè)樣的(de)CSS控制之下(xià)，則可(kě)以在Firefox中達到背景圖片随父容器大(dà)小而自動變化(huà)，達到填充效果，圖片會被拉伸填充，這(zhè)并不是我們想要的(de)效果，那麽我們可(kě)以不設置100%參數，而是使用(yòng)cover參數。 background-size:cover;設置cover參數以後，背景圖會按比例縮放填充滿整個(gè)背景。
針對(duì)IE浏覽器
但是在IE之下(xià)，你會發現上面的(de)CSS控制會很不理(lǐ)想，它并不會因爲你有了(le)background-size:100% 100%;而自動縮放，圖片原本怎麽樣就怎麽樣顯示，如果容器比圖片小，則隻能顯示圖上的(de)一部分(fēn)，那麽要達到這(zhè)個(gè)效果，則需要使用(yòng)IE特有的(de)濾鏡。
AlphaImageLoader
AlphaImageLoader兼容性在IE5.5+以上版本的(de)浏覽器上都可(kě)以完美(měi)運行。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性
enabled: 可(kě)選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false
true: 默認值。濾鏡激活。
false: 濾鏡被禁止。
sizingMethod: 可(kě)選項。字符串(String)。設置或檢索濾鏡作用(yòng)的(de)對(duì)象的(de)圖片在對(duì)象容器邊界内的(de)顯示方式。
crop: 剪切圖片以适應對(duì)象尺寸。
image: 默認值。增大(dà)或減小對(duì)象的(de)尺寸邊界以适應圖片的(de)尺寸。
scale: 縮放圖片以适應對(duì)象的(de)尺寸邊界。
src: 必選項。字符串(String)。使用(yòng)絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數，濾鏡将不會作用(yòng)。
特性
Enabled: 可(kě)讀寫。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod: 可(kě)讀寫。字符串(String)。參閱 sizingMethod 屬性。
src: 可(kě)讀寫。字符串(String)。參閱 src 屬性。
說明(míng)
在對(duì)象容器邊界内，在對(duì)象的(de)背景和(hé)内容之間顯示一張圖片。并提供對(duì)此圖片的(de)剪切和(hé)改變尺寸的(de)操作。如果載入的(de)是PNG(Portable Network Graphics)格式，則0%-100%的(de)透明(míng)度也(yě)被提供。
PNG(Portable Network Graphics)格式的(de)圖片的(de)透明(míng)度不妨礙你選擇文本。也(yě)就是說，你可(kě)以選擇顯示在PNG(Portable Network Graphics)格式的(de)圖片完全透明(míng)區(qū)域後面的(de)内容。
hello{width:10%;height:50%;position:absolute;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');} 通(tōng)過上面兩種方法的(de)介紹，我們就可(kě)以完美(měi)兼容所有的(de)浏覽器，使用(yòng)CSS讓背景圖100%填充。
