background-size语法:

  /*Mozilla*/ -moz-background-size: auto || <length> || <percentage> || cover || contain

  /*Webkit*/ -webkit-background-size: auto || <length> || <percentage> || cover || contain

  /*Presto*/ -o-background-size: auto || <length> || <percentage> || cover || contain

  /*W3c标准*/ background-size: auto || <length> || <percentage> || cover || contain

  参数:

  auto:默认值,就是使用背景图保持原样,不做任何参数修改,这个效果就相当于没加background-size效果一样

  length:指定两个值,单位px,分别制定背景图的宽度和高度

  percentage:指定两个百分数,但同length指定宽高不同的是,percentage指定的百分比是根据被设置背景图片的容器的大小为基准的

  cover:background-size取值为cover时,背景图片自己会放大到适合容器的尺寸

  contain:cover是把背景图片放大到适合元素容器的尺寸,这时的contain刚好是跟cover相反,是把背景图片缩小到适合元素容器的尺寸

css3整理--background-size的更多相关文章

  1. CSS3中background属性的调整

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

  2. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  3. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  4. css3整理-方便查询使用

    最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...

  5. css3之background

    background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...

  6. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  7. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  8. css3整理--::selection

    ::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Fi ...

  9. css3整理--background-image

    background-image语法: background-image: url1,url2,...,urlN; 通过“,”分隔N张背景图片,background的所有其它属性需要配合该属性进行设置 ...

  10. css3整理--gradient

    gradient语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, & ...

随机推荐

  1. WordPress基础:极简手动安装教程

    1.下载WordPress 2.将解压后的文件夹,放到网站根目录,并重命名为你喜欢的目录如:w, 3.重命名文件wp-config-sample.php 为 wp-config.php,并进行配置 4 ...

  2. 三大分析法——SWOT、PEST、波特五力

    SWOT分析法 「SWOT分析模型简介」 (也称TOWS分析法.道斯矩阵).在现在的战略规划报告里,SWOT分析应该算是一个众所周知的工具.来自于麦肯锡咨询公司的SWOT分析,包括分析企业的优势(St ...

  3. C# 2015关键字

    关键字是对编译器具有特殊意义的预定义保留标识符. 它们不能在程序中用作标识符,除非它们有一个 @ 前缀. 例如,@if 是有效的标识符,但if 不是,因为 if 是关键字. 本主题中的第一个表列出的关 ...

  4. JSON数据之使用Fastjson进行解析(一)

    据说FastJson是目前最快的解析Json数据的库,而且是国人开发出来的开源库.顶一下,付上官方网址:http://code.alibabatech.com/wiki/pages/viewpage. ...

  5. SoapUI Pro Project Solution Collection-XML assert

    in soapui the XML object used here is from  org.w3c.dom package so you need to read this article car ...

  6. ISO镜像安装Ubuntu 13.04 64位,启动菜单制作

    1.将光盘镜像中的vmlinuz.efi.initrd.lz,和镜像本身(ubuntu....iso) 三个文件复制到U盘根目录下.如果下面的方法没成功启动,你可能要把U盘格式化为USB-HDD FA ...

  7. Swift 柯里化

    前言 由于柯里化在业务层的应用较少,所以从 Swift 3.0 开始移除了柯里化的用法,但是 Swift 的很多底层特性是使用柯里化来表达的. 1.柯里化 1.1 柯里化简介 柯里化(Currying ...

  8. Android Studio配置Android Annotations框架详解--说说那些坑

    我们开发过程中都需要写些findViewByid.serOnclickListener等类似的代码,虽然不费事,但是一个项目下来,工作量还是很大的.为了节省工作量,运生了很多对应的注解框架.网上的博客 ...

  9. 通用返回XML格式结果

    public class ResultModel { public string OrderCode { get; set; } public string Message { get; set; } ...

  10. Git应用实践(二)

    [时间:2017-08] [状态:Open] [关键词:Git,git diff, git apply, git format-patch, git am, git log] 0-背景 距上次总结Gi ...