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. delphi StringGrid 表格的复制粘贴

    //参考如下代码--uses Clipbrd; function StringGridSelectText(mStringGrid: TStringGrid): string;var  I, J: I ...

  2. C#高级编程----反射的小结

    C#反射的应用小结 1.何谓反射? 反射就是在运行的时候发现对象的相关信息.根据这些信息可以动态的执行对象的方法以及获取对象的属性所存储的值.使用.NET编写的代码时自动反射的,或者说是自我描述的.之 ...

  3. 从安装node js到构建一个vue并启动它

    1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行Node.js command prompt(node -v查看安装版本) 3.安装npm(由于 ...

  4. Android系统资源图标android.R.drawable

    Android™ 2.1 android.R.drawable Icon Resources Android™ 1.5 android.R.drawable Icon Resources Androi ...

  5. 微软BI 之SSIS 系列 - 使用 Multicast Task 将数据同时写入多个目标表,以及写入Audit 与增量处理信息

    开篇介绍 在 SSIS Data Flow 中有一个 Multicast 组件,它的作用和 Merge, Merge Join 或者 Union All 等合并数据流组件对比起来作用正好相反.非常直观 ...

  6. Ubuntu菜鸟入门(十八)————解决Ubuntu下Sublime Text 3无法输入中文

    一.下载我们需要的文件,打开终端,输入: git clone https://github.com/lyfeyaj/sublime-text-imfix.git 二.将subl移动到/usr/bin/ ...

  7. Adobe Photoshop for Mac(图像处理软件)破解版安装

    1.软件简介    Adobe Photoshop(简称 "PS")是 macOS 系统上一款由 Adobe Systems 开发和发行的图像处理软件.Photoshop 主要处理 ...

  8. React Native 设置RGBA背景色

    React Native 设置RGBA背景色: 可以先用Mac自带吸色工具,获取RGB值,然后设置背景如下: backgroundColor: 'rgba(52, 52, 52, 0.8)', 透明度 ...

  9. Myloader参数说明

    -d, --directory 备份文件的目录 -q, --queries-per-transaction 每次事务执行的查询数量,默认是1000 -o, --overwrite-tables 如果要 ...

  10. MySQL -- Innodb中的change buffer

    change buffer是一种特殊的数据结构,当要修改的辅助索引页不在buffer pool中时,用来cache对辅助索引页的修改.对辅助索引页的操作可能是insert.update和delete操 ...