CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)
发布时间：2013-04-24 15:49:25 作者：佚名 
我要评论
我要评论按钮作为DIV的背景图来显示，实际上有多个这样的按钮，而且DIV中的文字，也就是按钮上要显示的文字内容和个数都不定，这种情况下就需要用背景图片拉伸效果来处理，感兴趣的朋友可以参考下
信各位一定碰到过这种情况，按钮作为DIV的背景图来显示，实际上有多个这样的按钮，而且DIV中的文字，也就是按钮上要显示的文字内容和个数都不定，这种情况下就需要用背景图片拉伸效果来处理了，只需做一个按钮图片，作为DIV的背景图时随着DIV的宽度或高度自适应就OK了。网上也找过，但不兼容IE或有bug，下面贴出本人亲测代码，兼容主流浏览器，包括Firefox、Chrome以及 IE 等主流浏览器（IE使用滤镜效果实现）：
.btn_bg {
width:150px;
height:50px;
background-image:url(./btn.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-moz-border-image: url(./btn.png) 0;
background-repeat:no-repeat\9;
background-image:none\9;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./btn.png', sizingMethod='scale')\9;
}
定义好上述CSS后，就可以在页面中使用了，例如：
<div class="btn_bg"></div>
btn_bg样式中：width和height定义了背景图默认的宽高，假如这个不定义并且引用该样式的DIV也不定义宽度，那么背景图的宽度会拉伸至浏览器的宽度，另外可以指定DIV的宽度来拉伸背景图，如：
<div class="btn_bg" style="width:300px"></div>。
细心的你会发现，最后三行代码每行样式后都加了 \9 这是指定在IE8及以下浏览器中的样式。
复制代码
代码如下:.btn_bg {
width:150px;
height:50px;
background-image:url(./btn.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-moz-border-image: url(./btn.png) 0;
background-repeat:no-repeat\9;
background-image:none\9;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./btn.png', sizingMethod='scale')\9;
}
定义好上述CSS后，就可以在页面中使用了，例如：
复制代码
代码如下:<div class="btn_bg"></div>
btn_bg样式中：width和height定义了背景图默认的宽高，假如这个不定义并且引用该样式的DIV也不定义宽度，那么背景图的宽度会拉伸至浏览器的宽度，另外可以指定DIV的宽度来拉伸背景图，如：
复制代码
代码如下:<div class="btn_bg" style="width:300px"></div>。
细心的你会发现，最后三行代码每行样式后都加了 \9 这是指定在IE8及以下浏览器中的样式。
相关文章
- 实现背景图片拉伸的方法有很多，下面为大家详细介绍下使用滤镜来简单实现，有需要的朋友可以参考下，希望对大家有所帮助2013-08-18
- 但是css3出现以后，这个重复显示的情况被改善了。background-size 属性可以让我们之前的让背景图片拉伸填充的希望成真，具体使用方法如下感兴趣的朋友可以参考下哈，希望对2013-07-11
- table自动拉伸在做浏览器兼容时一直困扰着我，终于解决了，这篇文章我是极力推荐的,table有时候不好控制，一些内容自动非配td宽度以及内容撑开，边的问题有时候很让人头疼2013-03-25
- 大家在写按钮（input、button）的时候会发现在 IE 下： 随着字数的增多，两边的间距也会越来越大。 在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。 到底2008-12-25
- 可在background属性中设置所有的背景属性，下面为大家详细介绍下各个属性的含义，初学者可以参考下，希望对大家学习css有所帮助2013-08-12
- DIV背景定义参数：background 设置元素的背景参数,div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，大大2013-02-02
对背景图定位中background-position属性的自我理解
最近在项目中需要大量的用到很多标签按钮什么的零碎图片，加上一直没机会使用Css中的”精灵技术“，这里把我对background-position的理解写成文档供更多人使用学习;如果有2013-01-15- 使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-19
最新评论