实现body背景拉伸自适应 兼容chrome ie7,8,9.ie6未测试
html, body
{
/*此部分支持chrome,应该也支持firefox*/
background: rgb(246,248,249);
background: url('/styles/images/bg.jpg') no-repeat center fixed;
background-attachment: fixed;
background-size: 100% 100%;
/*以下是IE部分,使用滤镜*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/styles/images/bg.jpg',sizingMethod='scale');
background-repeat: no-repeat;
background-positon: 100%, 100%;
font: normal 12px tahoma, arial, verdana, sans-serif;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=\'#\'" )
enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true:默认值。滤镜激活。
false:滤镜被禁止。
sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。
src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
实现body背景拉伸自适应 兼容chrome ie7,8,9.ie6未测试的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- 兼容chrome和ie的音乐播放
兼容chrome和ie的音乐播放(Ie7 Ie8 Ie9 均測试过 ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- textarea增加字数监听且高度自适应(兼容IE8)
1.封装方法: var textareaListener = { /*事件监听器兼容 * *attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.IE9.IE10.IE1 ...
- 加入收藏夹的js代码(求兼容chrome浏览器的代码)
从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...
- 基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览 源码下载 实现的代码. css代码: .jawbone-hero .jaw ...
- JS - 兼容到ie7的自定义样式的滚动条封装
demo: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- js+css实现点击回到顶部的效果(最低兼容至ie7)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- CSS背景图拉伸自适应尺寸,全浏览器兼容
突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...
随机推荐
- Ionic2开发环境搭建
关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各 ...
- 我用ASP.NET缓存之OutputCache
[我的理解]页面缓存常用在网站上.Web应用系统上也用,但由于Web系统常与数据库打交道.时效性要求蛮强的,所以是否能用缓存得具体情况具体分析(很喜欢这句话“具体情况具体分析”,很符合国人的中庸之道) ...
- 网络基础1_TCP和HTTP
TCP/IP 是互联网相关的各类协议族的总称,并且进行分层,分为应用层,传输层,网络层,数据链路层这四层协议,分层的好处,是便于后期的优化与改进,扩展性好 应用层:主要为客户提供应用服务, ...
- 【转】Dubbo声明式缓存
缓存的应用非常广泛,为了提高数据访问的速度.Dubbo也不例外,它提供了声明式缓存,以减少用户加缓存的工作量. 一.Dubbo中缓存策略 lru 基于最近最少使用原则删除多余缓存,保持最热的数据被缓存 ...
- eclipse启动项目报错:java.lang.ClassNotFoundException: ContextLoaderListener
eclipse 启动项目报错:找不到 Spring 监听器类 org.springframework.web.context.ContextLoaderListener 严重: Error confi ...
- Differences between write through and write back
https://stackoverflow.com/questions/27087912/write-back-vs-write-through
- CSS选择器深入探讨(细节东西)(转)
细节决定成败,越是注重细节方面的东西,那么你完成的作品就越完美. 1.父子选择器(看作组合比较好理解) 父子选择器可以有多级(但是在实际开发中最后不好超过三层) 如:html中文件片段: <!- ...
- 浅谈脚本化css(二)
查询计算样式 window上面有一个方法叫做getComputedStyle可以来获取元素的计算样式,也就是css样式. window.getComputedStyle(ele. null); J ...
- js时间与毫秒数互相转换(转)
[1]js毫秒时间转换成日期时间 var oldTime = (new Date("2017/04/25 19:44:11")).getTime(); //得到毫秒数 / ...
- 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...