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%;
}


相关文章推荐

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

之前因为这个背景放大缩小问题困扰几天,随后找了很多方资料才解决...    这次把他记录下来,事出仓促就直接放自己的代码了,效果图如下。 代码: <% String path = ...

CSS左侧固定宽 右侧自适应(兼容所有浏览器)

http://blog.csdn.net/itpinpai/article/details/50858538 CSS样式 [css] view plain co...

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题

我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致...

CSS左侧固定宽 右侧自适应(兼容所有浏览器)

左侧固定宽,右侧自适应屏幕宽; 左右两列,等高布局; 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现; 仔细分析试题要求...

背景图自适应

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

sprite背景图优化,通过设置css3 background-size来压缩大图达到高清效果,来解决H5网页在手机浏览器下图标模糊的问题。

Android实现背景图自适应不失真

不少人开发了不少Android应用程序,中间必遇到一事,就是Android背景图片的自适用及失真问题,因此,本篇解决了这个问题并写出来与大伙分析,此篇为之android开发人员的必备知识,欢迎阅读: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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