1. 程式人生 > >background-size的兼容性

background-size的兼容性

百分比 這樣的 strong 背景圖像 ssi spa over enabled enable

做響應式布局的時候,如果有背景圖,我們當然希望他能夠全屏100%顯示,這樣顯得頁面非常的爆滿,不過這又出現了一個問題,圖片的尺寸多大合適呢,現在的瀏覽器分辨率參差不齊,對於Firefox等高級的瀏覽器,使用Background-size設置為100%即可,而IE瀏覽器就需要不同設置。

在Firefox中,只需要用background-size則可以控制其隨容器的大小而自動伸縮

1 picLUp{
2     background:url(logo.png)no-repeat;
3     width:100%;height:40%;
4     background-size:100%100%;
5 }

在這樣的CSS控制之下,則可以在Firefox中達到背景圖片隨父容器大小而自動變化,達到填充效果,但是在IE之下,你會發現上面的CSS控制會很不理想,它並不會因為你有了background-size:100% 100%;而自動縮放,圖片原本怎麽樣就怎麽樣顯示,如果容器比圖片小,則只能顯示圖上的一部分,那麽要達到這個效果,則需要使用IE特有的濾鏡。

語法

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性

  • enabled: 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false
  • true: 默認值。濾鏡激活。
  • false: 濾鏡被禁止。
  • sizingMethod: 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。
  • crop: 剪切圖片以適應對象尺寸。
  • image: 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
  • scale: 縮放圖片以適應對象的尺寸邊界。
  • src: 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數,濾鏡將不會作用。

特性

  • Enabled: 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
  • sizingMethod: 可讀寫。字符串(String)。參閱 sizingMethod 屬性。
  • src: 可讀寫。字符串(String)。參閱 src 屬性。

說明

在對象容器邊界內,在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%的透明度也被提供。

PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說,你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區域後面的內容。

1 hello{
2     width:10%;
3     height:50%;
4     position:absolute;
5     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘1.jpg‘,sizingMethod=‘scale‘);

通過上面兩種方法的介紹,我們就可以完美兼容所有的瀏覽器,使用CSS讓背景圖100%填充。

附上background-size屬性:

background-size:規定背景圖像的尺寸

  1.length:設置背景圖像的高度和寬度第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"。
  2.percentage:以父元素的百分比來設置背景圖像的寬度和高度第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"。
  3.cover:把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。
  4.contain:把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。
background-position:屬性設置背景圖像的起始位置。

  1.有left,top,right,bottom,center五個值組合顯示位置。如果只寫第一個,第二個省略默認center。
  2.x% y%:第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值,另一個值將是 50%。
  3.Xpx Ypx: 第一個值是水平位置,第二個值是垂直位置。

background-size的兼容性