实现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背景图片拉 ...
随机推荐
- 对于单文本或者div的内容怎么在显示东西过多的情况下实现显示隐藏
js代码: $(function () { var o = document.getElementById("newsdetail_ArticleContent"); Subt(o ...
- 【JavaScript 从零开始】 语言核心部分----可选的分号
Node.js很是火爆,前段待遇好的飞起.... 于是我决定.... 重头开始学习JavaScript有些比较特别的,或者之前我们注意到,再或者容易出错东西我会记录下来. 可选的分号 和其他许多编程语 ...
- IOS中微信摇一摇声音无法播放解决办法
在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗,用户 ...
- [日常] nginx与负载均衡
去年的事,随便记记 ========================================================================= 2017年3月31日 记录: n ...
- [日常] crontab的秒执行和串行化和多进程实现
1. crontab的最低运行频率是,按照每分钟执行一次,通过在脚本中简单实现按秒级别运行 比如这条cron规则 , 每分钟执行一次脚本 * * * * * php /var/www/html/tes ...
- [javaSE] 网络编程(概述)
网络通信的步骤, 1.找到对方的ip 2.数据发送到对方指定的应用程序上,为了标识这些应用程序,用数字进行标识,这个数字就是端口 3.定义通信规则,这个规则就称为协议 国际组织定义了通用协议 TCP/ ...
- JSP学习笔记(2)-JSP语法
1.JSP页面的基本结构 (1)HTML标记符(2)JSP标记(3)变量和方法的声明(4)Java程序片(5)Java表达式 2.变量和方法的声明 成员变量和方法 语法:<%! 变量.方法%&g ...
- Burp Suite插件推荐
BurpSuiteHTTPSmuggler 网址 https://github.com/nccgroup/BurpSuiteHTTPSmuggler 作用 利用 中间件对 HTTP 协议的实现的特性 ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 大数据量报表APPLET打印分页传输方案
1 . 问题概述 当报表运算完成时,客户端经常需要调用润乾自带的runqianReport4Applet.jar来完成打印操作, 然而数据量比较大的时候,会导致无法加载完成,直至applet内存 ...