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

转载 2016年05月30日 16:04:33

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

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

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

.bg{
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
	background-size:100% 100%;
}


图片如何自适应浏览器窗口大小

图片如何自适应浏览器窗口大小标签: 前端,网页背景图片,切图假如UI给你的设计稿的分辨率是 1980*1080 的,你通过 ps 切下来的背景图也是这个尺寸。如果用户浏览器的窗口可视区域小于或大于该尺...
  • github_37483541
  • github_37483541
  • 2017年02月08日 22:39
  • 2603

ie和火狐兼容性问题(ie背景自适应)

今天有些收获,在这里记录一下。 css方面的,ie和火狐的兼容性。 div里有个background属性,设置背景图片自适应。 火狐问题不大,一段代码搞定 background: url('i...
  • yipanbo
  • yipanbo
  • 2015年04月11日 23:40
  • 1785

div动态设置背景图遇到的火狐和谷歌浏览器兼容问题

1.最终期望效果如下,输入车号,点击查找,对应机械车闪烁展示 2.前台的展示div是在后台生成的,通过定时调用切换div的背景效果,切换代码如下 function showFixed(id...
  • u011769706
  • u011769706
  • 2016年10月12日 14:07
  • 1463

高仿android-QQ空间下拉背景图拉伸回弹效果,修复已知BUG

  • 2015年10月28日 12:57
  • 2.7MB
  • 下载

CSS背景图片自适应、全屏、填充、拉伸

方法一、 js控制: 1 2 3 div id="formbackground" style="position:absolute; widt...
  • u014763002
  • u014763002
  • 2016年09月23日 11:28
  • 705

html 背景图自适应实例(css 利用position:absolute)

之前因为这个背景放大缩小问题困扰几天,随后找了很多方资料才解决...    这次把他记录下来,事出仓促就直接放自己的代码了,效果图如下。 代码: ...
  • dcb_ripple
  • dcb_ripple
  • 2017年07月20日 17:24
  • 344

控制APP端,各种浏览器兼容问题,自适应尺寸

 jquery-1.8.2.min.js"> application.function.js"> *{margin:0;padding:0;} ul,ol,dl,dt,dd,...
  • liuzp111
  • liuzp111
  • 2014年08月26日 20:01
  • 473

仿QQ得背景图随手势拉伸而缩放的控件

  • 2016年10月17日 16:30
  • 38.33MB
  • 下载

手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置

思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置,一样没鸟用,除非你搞个js判断,动态刷新。 换一种思路,直接用显示出...
  • sinat_35836870
  • sinat_35836870
  • 2016年12月27日 13:10
  • 394

设置背景图时防止图片拉伸的解决方法

在设置背景图时,如果图片不够大会被拉伸,使图片失真,如果图片太大会对view控件的显示造成影响。 如果只是在ImageView中设置图片的话,在程式中可以利用setScaleType进行动态设定,在...
  • u012992171
  • u012992171
  • 2015年06月16日 12:06
  • 311
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS背景图拉伸自适应尺寸,全浏览器兼容
举报原因:
原因补充:

(最多只允许输入30个字)