background-size 如果以百分比的形式设置参数,第一个参数是宽度,第二页参数是高度。“如果只设置第一个参数,则第二个参数为auto”。这样设置,在Firefox chrome 浏览器中,图片都能根据元素的大小,平铺到元素上。

background-size: 100%;

  但是,在IE 浏览器上,如果元素的高度大于图片高度时,图片将"repeat"显得,我们期望的结果:在高度时,图片也能均匀地拉伸,以达到铺满元素的效果。

background-size: 100%;
background-repeat: no-repeat;

  设置background-repeat 属性值为no-repeat后,图片缩回到它原来的大小的位置了。但是还是没达到我们的期望。

  将background-size 的宽度和高度,都设置成100%的形式,可以实现图片均匀地拉伸显示到元素背景上。

background-size: 100% 100%;

  

IE 浏览器background image 属性问题的更多相关文章

  1. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  2. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  3. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  6. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  7. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  8. js浏览器对象的属性和方法

    1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...

  9. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

随机推荐

  1. 树莓派apache2.4源码包安装

    1.安装apr-1.6.3.tar.gz apr-util-1.6.1.tar.bz2 httpd-2.4.34.tar.gz (源码包下载centos7的就行,树莓派版本官方debian) 2.问题 ...

  2. Linux 访问权限

    [TOC] Linux访问权限 Linux用户和用户组 查看当前用户用命令who am i 用命令id username可以显示指定用户的用户id.用户组id(GID).和所属附加群组的信息. 所有的 ...

  3. Fiddler 会话查找功能

    如下,会话列表中有很多会话,我们如果想要找到想要的会话,可以通过通过快捷键 Ctrl + F 进行查找

  4. 如何写Emit代码

    写Emit代码也不是想象中的那么复杂,基本过程就是先手工写好C#代码,编译得到Exe或者Dll,然后用ILDASM或反编译工具,得到IL代码,最后就是看着IL代码,用Emit一个个对应发出代码,就行了 ...

  5. python中unicode 和 str相互转化

    python中的str对象其实就是"8-bit string" ,字节字符串,本质上类似java中的byte[]. 而python中的unicode对象应该才是等同于java中的S ...

  6. poj 3348

    裸的凸包,,我就来粘一下板子 把jls和dls的代码混合了一下(雾),感觉我要是能把camp里的几何掌握的差不多就稳         了.(mxy到底打了什么?) 感觉叉积实在是个好东西qwq 今晚c ...

  7. python中print(obj) 与sys.stdout.write()的区别

    print(obj) 其实等价于sys.stdout.write(obj+\n),而\r表示回到行首,所以需要输出进度条时可以用以下代码 rate = float(has_sent) / float( ...

  8. HttpRequest获得服务端和客户端的详细信息

    参考文档:http://blog.csdn.net/u012104100/article/details/43051301 http://blog.csdn.net/u011162260/articl ...

  9. python语法_终止循环_break_continue

    break 终止整个循环计算 continue 终止本次循环,continue前的代码执行,continue后的代码不执行,下次循环继续.

  10. 微信小程序(微信应用号)组件讲解[申明:来源于网络]

    微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html