实现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背景图片拉 ...
随机推荐
- Python__组合数据类型
组合数据:集合类型.序列类型(元组类型.列表类型).字典类型 集合: 定义:集合是多个元素的无序组合.(无序,唯一,Python中要求放入集合中的数据类型是不可变的). 集合用大括号 {}表示,元素间 ...
- js中的深浅拷贝
js中的深浅拷贝 js中有深拷贝.浅拷贝一说,所谓的深浅拷贝是针对value类型为引用类型(函数.对象.数组)而言的,大概理解的就是: 浅拷贝: 拷贝出的对象c和原始对象o,c和o在key对应的val ...
- 微服务与DevOps关系
随着IT技术的不断发展,从传统的IT建设模型逐步向新型IT建设模型过渡,建设模式的改变,必然影响应用系统的全生命周期.应用系统的建设经过单体应用.SOA应用.逐步走向微服务应用,至于何为单体应用.SO ...
- mac 下mongodb connect failed 连接错误
我是用brew install mongod 安装的 MongoDB shell version v3.4.2connecting to: mongodb://127.0.0.1:270172017- ...
- JSON 使用 教程
JSONP 教程 本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
- web 后端规范与思想
一.分层1.Web层(接受和发送Http请求的,封装;web层.controller层) 2.业务逻辑层(服务层,XXXService) LoginController(接受参数,判断是否非法,传给服 ...
- 虚拟主机服务器php fsockopen函数被禁用的解决方法
为了服务器安全考虑很多主机商禁用了php的fsockopen函数,昨天进博客,使用cos-html-cache生成静态文件,尼玛提示: Warning: fsockopen() has been di ...
- [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
- github上的项目发布成静态网页
代码上传成功之后就可以发布静态网页了,细心的童鞋应该已经看到我上传的代码在根目录就有一个html文件(发布其他情况没试过,感兴趣自己去尝试),发布的时候选择仓库即自动识别了. 第一步:点击settin ...
- Anaconda多环境多版本python配置笔记
一.Conda测试过程: 使用conda.首先确认已经安装好了conda 配置环境.下一步通过创建几个环境来展示conda的环境管理功能.学习如何确认在哪个环境中,以及如何做复制一个环境作为备份. 测 ...