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. EasyUI学习总结(五)——EasyUI组件使用

    一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示:

  2. AngularJS中获取数据源的几种方式

    在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中.本篇就来整理获取数据的几 ...

  3. C#编程(七十五)----------C#使用指针

    原文链接: http://blog.csdn.net/shanyongxu/article/details/47321441 在C#中使用指针的语法 如果想在C#中使用指针,首先对项目进行过配置: 看 ...

  4. 在vi中搜索字符串,替换字符串

    在vi中搜索一个字符串: 输入命令:"vi test.txt"用vi打开一个文本文件. 输入命令:"/spider"用ESC键进入命令模式,然后输入一个&quo ...

  5. wifipineapple执行dnsspoof

    ssh连接到wifipineapple: 输入连接信息:ssh root@172.16.42.1 输入密码:pineapplesareyummy 安装依赖基本环境: opkg update opkg ...

  6. nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) 解决办法

    遇到这个问题,是因为某个服务正在使用80端口; 解决步骤: 1.使用netstat命令查看80端口被哪个服务占用了 netstat -ant | grep 80 1 2.关闭80端口 /etc/ini ...

  7. Cache Line 伪共享发现与优化

    https://yq.aliyun.com/articles/465504 Cache Line 伪共享发现与优化 作者:吴一昊,杨勇 1. 关于本文 本文基于 Joe Mario 的一篇博客 改编而 ...

  8. 基于CentOS体验万象优图鉴黄服务

    系统要求:CentOS 7.2 64 位操作系统 初始化配置 使用万象优图图片鉴黄 API 接口,我们需要先完成以下步骤: 获取腾讯云账号 APP ID 配置云 API 公钥/密钥 配置优图 buck ...

  9. 微信公众号 几种移动端UI框架介绍

    微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计, ...

  10. mysql分享二-防止sql注入

    一:pdo 提供给预处理语句的参数不需要用引号括起来,驱动程序会自动处理.如果应用程序只使用预处理语句,可以确保不会发生SQL 注入.(然而,如果查询的其他部分是由未转义的输入来构建的,则仍存在 SQ ...