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. 设计模式——proxy代理模式

    目录 概述 定义 角色 为什么会有代理模式? 应用场景 示例 静态代理 例子 动态代理 JDK中生成代理对象的API 代码示例: 代码示例2 Cglib代理 代码示例 AOP(AspectOrient ...

  2. 框架源码系列七:Spring源码学习之BeanDefinition源码学习(BeanDefinition、Annotation 方式配置的BeanDefinition的解析)

    一.BeanDefinition 1. bean定义都定义了什么? 2.BeanDefinition的继承体系  父类: AttributeAccessor: 可以在xml的bean定义里面加上DTD ...

  3. Tensorflow1.4 高级接口使用(estimator, data, keras, layers)

    TensorFlow 高级接口使用简介(estimator, keras, data, experiment) TensorFlow 1.4正式添加了keras和data作为其核心代码(从contri ...

  4. Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求   Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java ...

  5. 关于vmware虚拟机硬件里没有软盘驱动器,而操作系统里还有的解决方法

    问题描述:今天笔者使用VMware 11.1.0安装了一个windows 7的操作系统,安装完成后进入系统发现 在计算机里的[有可移动存储的设备]下有一个软盘驱动器(A:)如下图所示: 但回到虚拟里设 ...

  6. 第三天 Linux简单命令

    2018-5-22 15:21:59 使用 atom 可以在windows环境下同步代码与linux (汉化配置好就可以啦) 2018-4-13 18:09:31  该看32节啦 1.man +陌生命 ...

  7. 在php cli下可以使用 STDIN 来实现标准输入

    简单的例子:  echo "请输入一个数字:";  $num = trim(fgets(STDIN)); echo "请再输入一个数字:";  $num1 =  ...

  8. poj 3348

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

  9. dll注入遇到CreateRemoteThread()返回错误代码5

    在进行dll注入的时候,发现触发了CreateRemoteThread()的错误并返回错误代码5,刚开始以为权限不够,用了管理员权限和加了SetPrivilege()函数提权和用NtCreateThr ...

  10. mac 远程连接 云服务器

    之前mac 命令行连接云端服务器,一直失败,今天问题突然间解决了,如果遇到类似的问题,按照方法解决不了,可以在下面留言,共同探讨. 首先,在云端先判断一下云端服务器是否安装了    ssh服务器:op ...