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. [译] 理解 LSTM(Long Short-Term Memory, LSTM) 网络

    本文译自 Christopher Olah 的博文 Recurrent Neural Networks 人类并不是每时每刻都从一片空白的大脑开始他们的思考.在你阅读这篇文章时候,你都是基于自己已经拥有 ...

  2. Mybatis sql映射文件浅析 Mybatis简介(三) 简介

    Mybatis sql映射文件浅析 Mybatis简介(三)   简介 除了配置相关之外,另一个核心就是SQL映射,MyBatis 的真正强大也在于它的映射语句. Mybatis创建了一套规则以XML ...

  3. 【目录】Docker 基本操作

    1 容器基本操作 : https://www.cnblogs.com/defineconst/p/9990611.html 2 容器启动退出 : https://www.cnblogs.com/def ...

  4. Docker-集群swarm(5)

     Docker集群的概念 群集是一组运行Docker并加入集群的计算机.在此之后,您继续运行您习惯使用的Docker命令,但现在它们由群集管理器在群集上执行.群中的机器可以是物理的或虚拟的.加入群组后 ...

  5. Oracle导出数据EXP00106错误

    在导出dmp文件的时候(命令:exp 用户名/密码@IP/实例名  file=D:\20180910.dmp log=D:\20180910.log),遇到以下错误: 错误原因: 导出使用的是Orac ...

  6. thinphp5框架遇到 mkdir() Permission denied 解决办法

    网站重装 直接复制本地程序文件 里面数据库链接信息要改成线上的 然后mysql apache 等都没有动 运行后出现错误 mkdir() Permission denied 这是由于runtime目录 ...

  7. python __get__ & __set__

    目的:  提供类似java中的getter/setter的东西. (getter/setter的目的: 将属性方法化,使得属性的引用变得简单---尤其将来属性的读取/赋值有比较复杂的逻辑) 官方简明文 ...

  8. 使用redis接管cookie

    class RedisCookie { // 默认配置名称(使用load_config加载) private $_default_config_path = 'package/cache/redis_ ...

  9. 45道sql

    一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2 ...

  10. 10.17小结:table.copy() 和 distinct 查询

    1. 当datatable 已存在于一个dataset中时,可以使用 ds.tables.add(dt.copy()) 来向dataset 中添加datatable; 2. 当datarow已存在于一 ...