定义元素背景设置 background-size属性cover自适应填充背景,background-size: 100% 100%; background-size: 左右比例  上下比例;

再介绍几个特殊属性:

background-clip :

background-origin :

background-size :背景尺寸。

background-break :

IE兼容background-size添加下面属性

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    sizingMethod='scale');
——————————————————————以下兼容谷歌/IE————————————————————————————
如要保留原图片比例
background-size: cover;
拉伸到和容器一样大小
  sizingMethod='scale'
全填充则设置为
background-size: 100% 100%;
 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>让IE兼容background-size的方法</title>
 
<style>
.bgpic {
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    sizingMethod='scale');
}
</style>
</head>
<body>
 
    <div  class="bgpic" style="width:200px;height:100px;"></div>
 
</body>
</html>
兼容最好,最强大的一种用Image充当背景。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用img标签实现补充全屏效果</title>
<style>
body{
position: absolute;
overflow:hidden;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 0;
}
</style>
</head>
<body >
<img runat="server" id="stretch" src="http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg" style=" width:100%; height:100%;position: absolute;z-index: -1;" />
</body>
</html>

html元素背景样式大小调整的更多相关文章

  1. CSS3:元素的边框、背景和大小

    边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...

  2. Eclipse设置:背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改:代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下:1.打开wi ...

  3. Eclipse中设置背景颜色与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  4. Eclipse设置:背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  5. MyEclipse背景与字体大小和xml文件中字体大小调整

    1.打开window / Preference,弹出Preference面板 2.展开General标签,选中Editors选项,展开. 3.选中 Text Editors,右边出现TestEdito ...

  6. (备忘)Eclipse设置:背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text ...

  7. CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  8. [19/06/07-星期五] CSS基础_布局&定位&背景样式

    一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  9. CSS3初学篇章_5(背景样式/列表样式/过渡动画)

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

随机推荐

  1. 关于 System.IO.FileAttributes 的 Reparse Points

    关于Reparse Points找到下面的解释,要是能有更进一步的解释说明就更好了 Reparse Points其实是一个用户自定义的数据集合,它可以包含在一个文件或目录中.这种格式的数据能够被特定的 ...

  2. CrossApp 0.3.1示例编译问题解决过程

    1 AlertTest.h找不到 问题成因:HelloCpp工程中头文件搜索路径没有增加Classes目录,需要自己加进去.(另外由于这些文件都是在子目录中,用递归模式也行,逐个子目录添加也行) 2 ...

  3. uestc1888 Birthday Party    组合数学,乘法原理

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=25539#problem/G 题目意思: 有n个人,每个人有一个礼物,每个人能拿 ...

  4. eBay_Relist(退换刊登费)

    如果物品首次刊登结束时没有人中标,或是买家并没有付款完成交易,那么卖家以通过重新刊登的方法来再次销售.如果该物品在第二次刊登时成功售出,且满足eBay的重新刊登退费条件,那么eBay便会退还重新刊登的 ...

  5. hdu1058丑数(优先队列、暴力打表)

    hdu1058 题意:当一个数只有2.3.5.7这四种质因数时(也可以一种都没有或只有其中几种),这个数就是丑数,输出第 n 个丑数是多少: 其实并没有发现hdu把这道题放在 dp 专题里的意图,我的 ...

  6. Linux系统编程@多线程编程(一)

    多线程编程 涉及操作系统原理概念 时间片 进程状态 上下文: 对进程来说,就是进程的执行环境,具体就是各个变量和数据,包括所有的寄存器变量.打开的文件.内存信息等. 进程的写时复制:由于一般 fork ...

  7. 对 Android 开发者有益的 40 条优化建议

    本文转载于:http://www.oschina.net/translate/40-developer-tips-for-android-optimization?cmp 下面是开始Android编程 ...

  8. SoftmaxLayer and SoftmaxwithLossLayer 代码解读

    SoftmaxLayer and SoftmaxwithLossLayer 代码解读 Wang Xiao 先来看看 SoftmaxWithLoss 在prototext文件中的定义: layer { ...

  9. apache日志切割

    一.日志切割 安装cronolog CentOS 5.4中编译安装Apache默认日志是不切割的,需要用用工具Cronnolog进行日志切割 1.下载及安装 wget http://cronolog. ...

  10. linux服务之rsyslog

    日志片断分析 systemd:服务报出来的信息kvm:内核模块kvm报出来的信息kernel: tun: 内核的tun模块报出来的信息kernel: br0: 内核的br0模块报出来的信息kernel ...