IE 浏览器background image 属性问题
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 属性问题的更多相关文章
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- background系列属性
1.background-color背景颜色属性 ①颜色表示方法 英语单词:red blue purple skyblue. rgb:r代表红色 g代表绿色 b代表蓝色 也 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)
http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- js浏览器对象的属性和方法
1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
随机推荐
- 使用python脚本实现iOS图片资源压缩
最近公司有一个新的需求,要把代码进行瘦身,这篇博客记录下如何对图片进行压缩的. 原理: 写一个脚本,把图片文件夹'.xcassets'的所有文件遍历出来,然后使用一个第三方的算法把图片压缩后再替换回去 ...
- mysql 批量导入 Packets larger than max_allowed_packet are not allowed
解决方法 :http://blog.csdn.net/gtosky4u/article/details/8581281
- [转] tomcat 7/8 启动非常慢的解决方法
在日志中发现启动慢的地方: -- ::] INFO o.s.c.s.DefaultLifecycleProcessor - Starting beans -- ::] INFO o.s.web.con ...
- unity3d IL2CPP for android
unity3d 使用IL2Cpp导出android工程报以下错误解决方法 重点是这块 “”System.Reflection.TargetInvocationException: ���õ�Ŀ�귢�� ...
- Java对象序列化和反序列化的工具方法
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- Linux 文件系统剖析
[转自]https://www.ibm.com/developerworks/cn/linux/l-linux-filesystem/ 按照分层结构讨论 Linux 文件系统 在文件系统方面,Linu ...
- 写在开始前---web异常处理
分层项目中,有上层调用下层,每一层都可能出错,比如数据库连接,文件读写等异常.除了运行时程序的异常,还有业务逻辑的一些问题.发生异常需要做一定处理,既要让开发人员便于排查问题,又要让用户看到友好又便于 ...
- Android学习:Notification状态栏通知
Notification是显示在手机状态栏的通知,它代表一种具有全局效果的通知,程序一般通过NotificationManager服务来发送Notification.在小米手机上,手指在屏幕顶端向下划 ...
- Redis 主从配置(Windows版)
安装从库 1.复制一份 Redis 文件,当做从库. 2.修改从库文件中 redis.windows.conf 的端口号. 3.安装服务,需要重新设置名称.然后去服务中,开启“redis6380”(此 ...
- flask将日志写入日志文件
import logging logging.basicConfig(level=logging.DEBUG,#控制台打印的日志级别 filename='log_new.log', # 将日志写入lo ...