兼容IE6►转载和翻译

[兼容各浏览器] 怎么用 CSS 拉伸背景解析

转载两篇博文，合起来就行了：

1、《背景图拉伸显示–只面向IE》

链接 http://weilaixu.cn/read.php/49.htm 语言 简体中文 内容

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’’, sizingMethod=’scale’)

2、background-size

链接 https://developer.mozilla.org/en/CSS/background-size 语言 English 内容

.foo {

    background-image: url(bg-image.png);

   -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */

     -o-background-size: 100% 100%;           /* Opera 9.5 */

-webkit-background-size: 100% 100%;           /* Safari 3.0 */

        background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

   -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */

}

其中，background-size 的浏览器兼容情况： image 综上所述， IE9 以上才支持 background-size，所以这样写：

/自动拉伸背景/

.foo {

   background-image:url(scale.jpg);

   -moz-background-size: 100% 100%;

       /\* Gecko 1.9.2 (Firefox 3.6) */

     -o-background-size: 100% 100%;

       /\* Opera 9.5 */

-webkit-background-size: 100% 100%;

       /\* Safari 3.0 */

        background-size: 100% 100%;

       /\* Gecko 2.0 (Firefox 4.0) and other

CSS3-compliant browsers */

   -moz-border-image: url(scale.jpg) 0;

/\* Gecko 1.9.1 (Firefox 3.5) */

}