1.背景的五种基本属性
background-color(背景颜色)
background-image(背景图片)
background-repeat(背景图片展示方式)
background-attachment(背景图片是固定还是滚动)
background-position(背景图片位置)
综合使用:background:[<background-color>][<background-image>][<background-repeat>][<background-attachment>][<background-position>]

2.background-color属性
语法:background-color:transparent || <color>
transparent:透明色
color:颜色名、rgb色、hls值、十六进制值、rgba色、hsla值

3.background-image属性
语法:background-image:none || <url>
none为默认值,没有的意思
url:图片地址,可以是相对地址,也可以是绝对地址

4.background-repeat属性
语法:background-repeat:repeat || repeat-x || repeat-y || no-repeat
repeat:背景图片沿X轴和Y轴方向平铺
repeat-x:背景图片沿X轴方向平铺
repeat-y:背景图片沿Y轴方向平铺
no-repeat:背景图片不做任何平铺

5.background-attachment属性
语法:background-attachment:scroll || fixed
scroll:背景图片随着页面的其余部分滚动
fixed:背景图片固定不动
注:取值fixed时,运用在html或body标签上,使用在其他标签不能达到固定效果

6.background-position属性
语法:background-position:[percentage] || [length] || [left | center | right] || [top | center | bottom]
作用:用来设置背景图片的位置
默认值:(0,0) || (0%, 0%) || (left top),其值可以是具体的百分数或数值设置(可以是负值),也可以使用关键字left、center、top、right、top、bottom配合设置,个属性定位方式:

7.CSS3中新增属性
background-origin:指定绘制背景图片的起点
background-clip:指定背景图片的显示范围
background-size:指定背景图片的尺寸大小
background-break:指定内联元素的背景图片进行平铺时的循环方式

8.CSS3背景原点属性:background-origin
作用:用来改变background-position属性的参考原点,默认起始点为左上角
旧语法格式:background-origin:padding || border || content
新语法格式:background-origin:padding-box || border-box || content-box
注:IE9+、Firefox4+、Chrome4+、Safari3+、Opera10.5+都支持新的语法格式
具有三个属性值:padding-box、border-box、content-box
padding-box(padding):默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片
border-box(border):决定background-position起始位置从border的外边缘开始显示背景图片
content-box(content):决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片
注:IE8以下版本background-origin的默认值border,背景图片的background-position是从border开始显示背景图片
浏览器兼容性:

9.CSS3背景裁切属性:background-clip,新增的第二个属性,用来定义背景图像的裁剪区域。和background-origin属性类似,接受的值有:
padding-box(背景延伸到padding的外边缘,但不会超出边框的范围)
border-box(背景图片在边框下,这个也是background-clip的默认值)
content-box(背景仅在内容区域绘制,不会超出padding和边框的范围)
语法:background-clip:border-box || padding-box || content-box
border-box:默认值,元素背景图像从元素的border区域向外裁剪,即元素边框之外的背景图片都将被裁剪掉
padding-box:元素背景图像从padding区域向外裁剪,即元素padding区域之外的背景图像将被裁剪掉
content-box:元素背景图像从content区域向外裁剪,即元素内容区域之外的背景图像将被裁剪掉
注:在HTML一个元素背景常由元素的内容(content)、内部补白(padding)、边框(border)和外部补白(margin)四部分构成

10.浏览器兼容性

对于background-clip and background-origin,自己现在理解用处不大,自己在实际中也很少用到,也许随着自己的不断深入还能有很好的体会,最主要的感悟是有的时候,我们可以不过多的去明确哪个属性的使用范围,思路不同范围不同,只能渐渐地去体会

11.CSS3背景尺寸属性

使用尺寸属性,可以指定背景图片的尺寸,可以控制背景图片在水平和垂直两个方向的缩放和控制图片拉伸覆盖背景区域的方式,甚至还可以截取背景图片。背景图片能够自适应元素盒子的大小,实现与模块大小完全适应的背景图片,避免因区块尺寸不同而需要设计不同的背景图片,在实际工作中,背景图片可以达到任意尺寸

语法:background-size:auto || <length> || <perentage> || cover || contain
auto:默认值,将保持背景图片的原始尺寸
<length>:取具体的整数值(px值),将改变背景图片的大小
<percentage>:取值为百分值,可以是0% ~ 100%。此时,同样改变背景图片的大小,但此值是相对于元素的宽度来进行计算,并不是根据背景图片的宽度来进行计算
cover:将背景图片放大,以适合铺满整个容器。但这种方法会导致背景图片失真
contain:保持背景图像的宽高比例,将背景图像缩放到宽度或高度正好适应所定义背景容器的区域

当取值是<length>和<percentage>的时候,可以取两个值,第一个是宽度,第二个是高度;当取一个值的时候,第二个值相当于设置成auto,让背景图片的高度按照比例缩放

cover PK contain:

第一张是cover,第二张是contain,所得:cover体现的是满足容器,也就是铺满容器为主;contain体现的是图片显示全为主以图片为主

浏览器兼容性:

12.内联元素背景图像平铺循环方式background-break属性
用来定义内联元素背景图像进行平铺时的循环方式,其中有三个属性值:bounding-box、each-box、continuous,分别表示三种平铺循环方式。可惜这个属性兼容目前仅属于FireFox,写成【-moz-background-inline-policy】
bounding-box:背景图像在整个内联元素中进行平铺
each-box:背景图像在行内中进行平铺
continuous:下一行的背景图像紧接着上一行中的图像继续平铺
这个属性的兼容性令人发指,自己最好亲自试验一下,对于兼容性没有什么绝对性的支持和不支持,更多的时候还是根据使用情况自己检测

13.CSS3多背景属性
能够在单一容器上使用复合的背景图像,CSS3要想达到多背景就需要多个容器;
通过CSS3的多背景属性,只需要一个容器,在CSS的background-image或者background属性中列出需要使用的所有背景图像,用逗号分开。其中的每张图片都具有background中的属性,例如可以定位、设置重复、改变背景图像大小以及其他可以单独控制的特性
语法和参数:background-(position||repeat||clip||origin||attachment)属性,相邻背景之间必须使用逗号分隔开
具体的语法:background:[background-image] | [background-position][/bckground-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin], *
也可以把上面的缩写拆解成以下形式:
background-image:url1, url2, url3, url4 ,..., urlN;
background-repeat:repeat1,repeat2,..., repeatN;
background-position:position1,position2,...,positionN;
background-size:size1,size2,...sizeN;
background-attachment:attachment1,attachment2,...,attachmentN;
background-clip:clip1,clip2,...,clipN;
background-origin:origin1,origin2,...,originN;
background-color:color;
注:除background-color(只能设置一个,设置多个将是一种致命的语法错误)之外,其他属性都可以设置多个属性值,前提是元素有多个背景图像存在,多个属性值之间必须使用逗号隔开
在多背景图像中,先声明的背景图片将会居于最上层,最后指定的背景图片将放在最底层
在CSS2中多背景,第一种是使用多个容器,第二种是把多张图片合并到一张图片上
多背景图片兼容性:

CSS3多背景基础背景属性不需要加前缀,但是使用background-size\background-clip\background-origin时,还是需要添加浏览器前缀的

CSS3背景温故的更多相关文章

  1. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  2. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  3. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  4. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  5. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  6. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  7. css3 背景background

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

  8. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  9. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

  1. poj1006生理周期(中国剩余定理)

    /* 中国剩余定理可以描述为: 若某数x分别被d1..….dn除得的余数为r1.r2.….rn,则可表示为下式: x=R1r1+R2r2+…+Rnrn+RD 其中R1是d2.d3.….dn的公倍数,而 ...

  2. XML序列化的时候如何支持Namespace

    我曾经不止一次(当然不仅仅是我意识到这个问题)说到过,XML标准中的Namespace的设计其实是一个较为失败的设计,它有它的优点,但缺点更多. http://zzk.cnblogs.com/s?w= ...

  3. How Spring Boot Autoconfiguration Magic Works--转

    原文地址:https://dzone.com/articles/how-springboot-autoconfiguration-magic-works In my previous post &qu ...

  4. 170多个Ionic Framework学习资源(转载)

    在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...

  5. 自制简单实用IoC

    IoC是个好东西,但是为了这个功能而使用类似 Castle 这种大型框架的话,感觉还是不大好 代码是之前写的,一直没详细搞,今天整理了一下,感觉挺实用的. IoC定义接口: using System; ...

  6. Elasticsearch——集群相关的配置

    cluster模块主要用于控制分片在节点上如何进行分配,以及何时进行重新分配 概览 下面的一些资料可以进行相关的配置: Cluster Level Shard Allocation用于配置集群中节点如 ...

  7. 检测WCF服务是否在线第二版

    上一版在这里http://www.cnblogs.com/kklldog/p/4878296.html 上一版主要是解决了监控服务不需要手动添加服务引用的问题,但是还是需要在配置文件中添加对应的end ...

  8. 音频文件解析(一):WAV格式文件头部解析

    WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频信息资源. 文 ...

  9. final .....finally ...... 和Finalize ......区别

    一.性质不同 ()final为关键字: ()finalize()为方法: ()finally为为区块标志,用于try语句中: 二.作用 ()final为用于标识常量的关键字,final标识的关键字存储 ...

  10. 使用Unity3d做异形窗口

    项目马上上线,因为之前的登录器是使用VS2010的MFC做的,在很多电脑上会提示缺失mfcXXXX.dll,中间找寻这种解决方案,最后确定将vcredist2010_x86和我的程序打包到安装包里面, ...