• WAP手机版 RSS订阅 加入收藏  设为首页
技术教程

CSS背景图拉伸自适应尺寸,全浏览器兼容

时间:2015/5/18 21:05:57   作者:新站长   来源:新站长网   阅读:976   评论:0
内容摘要:突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效。思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代。当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云....对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Ch...

突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效。思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代。

当CSS背景图片拉伸这个问题产生时,CSS3也只是浮云....

对于IE而言网上常见的方法是使用CSS滤镜,但那时Firefox还小,Chrome还没出生,IE称霸天下....。但如今,我们用三四行简短的代码就能实现全浏览器兼容的方法:

[css] view plaincopy
CSS背景图拉伸自适应尺寸,全浏览器兼容
  1. .bg{  
  2. background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);  
  3. filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
  4. -moz-background-size:100% 100%;  
  5.     background-size:100% 100%;  
  6. }  

源码调试:http://jsfiddle.net/wyongzhi/r3vM7/


标签:background IE浏览器 Firefox 背景图片 Chrome 
相关评论
诚信网站 备案信息 网警110 不良信息举报 网络安全监察 QQ站长联盟安全认证 360安全认证网站
冀ICP备13003921号-1