background-size: left center | 0% 50% | cover | contain

backgound-size: left center | 0% 50%; 这个指的是背景水平、垂直的大小控制

background-size: cover; 背景铺满整个容器，如果背景是图片，按照图片大小比例铺满整个容器

background-size: contain;  容器包含背景，它和上面不一样的地方是它是包含关系，有个padding值

IE下如何使用？

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale');
  • 需要注意的一点是:不要把IE滤镜应用到html和body上，会导致滚动条和链接出问题
  • 使用IE滤镜不会保持背景图片的宽高比，也即图片可能会变形

本文内容部分采自：www.topcss.org

background-size使用的更多相关文章

  1. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  2. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  3. 解决C# WinForm Graphics绘制闪烁问题

    不直接使用form的CreateGraphics创建Graphics进行绘制,可以先在Form上面放一个需要大小的PictureBox,再创建一个同大小的Bitmap,将这个Bitmap设置为Pict ...

  4. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  5. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  6. Android measure过程分析

    作为一名Android开发人员,我们都知道一个View从无到有,会经历3个阶段: 1. measure/测量阶段,也就是确定某个view大小的过程: 2. layout/布局阶段,也就是确定其左上右下 ...

  7. Android应用层View绘制流程与源码分析

    1  背景 还记得前面<Android应用setContentView与LayoutInflater加载解析机制源码分析>这篇文章吗?我们有分析到Activity中界面加载显示的基本流程原 ...

  8. 自定义控件(View的绘制流程源码解析)

    参考声明:这里的一些流程图援引自http://a.codekk.com/detail/Android/lightSky/%E5%85%AC%E5%85%B1%E6%8A%80%E6%9C%AF%E7% ...

  9. Android开发中的全屏背景显示方案

    引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...

  10. 用Qt写软件系列五：一个安全防护软件的制作（2）

    引言 在上一篇中讲述了主窗体的创建和设计.主窗体的无边框效果.阴影效果.拖动事件处理.窗体美化等工作在前面的博客中早就涉及,因此上篇博文中并未花费过多笔墨.这一篇继续讲述工具箱(Tool Button ...

随机推荐

  1. javascript的几种时间格式

    1.当前系统区域设置格式(toLocaleDateString和toLocaleTimeString) 例子:(new Date()).toLocaleDateString() + " &q ...

  2. Android面试必备

    好吧,说实话是自己面试被问到的和自己整理的别人的一些问题,很多问题的回答可能根据水平不同层次和深度不同,如果经常忘的话可能是还没明白原理,学习就是对对抗遗忘,现在开始复习吧: 每个面试的问题都极大的贴 ...

  3. Linux下配置VNC

    1.确认是否安装vnc服务端 : rpm -q tigervnc-server 默认是没有安装的,需要在Linux系统文件Packages文件夹找到vnc安装包(里面有两个分别是客户端与服务端)tig ...

  4. windows 安装paramiko模块

    首先需要安装pycrypto这个模块,这个下源码编译安装的不能用报错warning: GMP or MPIR library not found; Not building这个用编译好的模块安装已编译 ...

  5. NOPI使用手册

    目录 1. 认识NPOI 2. 使用NPOI生成xls文件 2.1 创建基本内容 2.1.1 创建Workbook和Sheet 2.1.2 创建DocumentSummaryInformation和S ...

  6. discuz二次开发笔记（二）------跳转函数运用

    前几天在增加修改功能时,突然用到一个提示函数,有点不理解,看了他的由来后果断做下笔记,感觉这在以后的开发中肯定还是要用的上的.有些地方不是很理解,在以后慢慢纠正.查补. Htm页面中用的js跳转: $ ...

  7. Android Studio 打包流程

    (1)Android Studio菜单Build->Generate Signed APK (2)弹出窗口 (3)创建密钥库及密钥,创建后会自动选择刚创建的密钥库和密钥(已拥有密钥库跳过)    ...

  8. Android_打开多个Activity，返回到第一个Activity

    正文 一.流程截图 二.问题说明 依次从登录到三级界面,然后退出回到登录界面. 三.解决办法 3.1 实现代码 三级界面调用如下代码:         Intent intent = new Inte ...

  9. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  10. jquerymobile listview 局部刷新

    function onSuccess(data, status) { data = $.trim(data); // alert(data); // return; if (data) { $('#l ...