8.CSS笔记：颜色、背景属性
本系列内容由ZouStrong整理收录
整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com
颜色和背景属性决定了网页显示的多样性
一. 颜色
1. color属性
- 作用：指定字体颜色
- 默认值：由用户代理决定
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 可取值：transparent、颜色名、HEX、RGB、RGBA、HSL、HSLA（具体含义详见取值与单位篇）
color属性值被间接用来提供一个中间值currentColor，以供其他接受颜色值的属性使用（例如默认的边框颜色）
2. opacity属性（CSS3新增）
- 作用：设置字体及背景的不透明度
- 默认值：1
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：0.0（完全透明）~1.0（完全不透明）（超过范围的数值，将截取到与之最相近的值）
IE6~IE8不支持opacity属性，可使用滤镜实现
opacity:0.5;
filter : alpha(opacity=50); /*取值0~100*/这两种方式实现的透明针对于背景色，字体，图片等所有元素，并且会被继承，所以子元素也会透明，若只想要背景透明，但文字不透明可以这样实现
方法1
高级浏览器（IE9+）直接使用CSS3的rgba颜色来实现
IE8以下浏览器，使用专属滤镜
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); 方法2
容器层与内容层分离，容器层设置透明度，内容层通过margin或者绝对定位覆盖到容器上
方法3
IE6、7、8、9，可以将子元素（内容层）设置为position:relative即可保证文字不透明(完美方法)
.out {
background:rgba(0,0,0,0.2); /*正常浏览器*/
background:#000\9; /*IE9及以下*/
filter:alpha(opacity=20); /* IE9及以下*/
}
.inner {position:relative\9;} /* IE9及以下*/二. 背景
1. background-color属性
- 作用：指定元素的背景色
- 默认值：transparent（透明）
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：transparent、颜色名、HEX、RGB、RGBA、HSL、HSLA
元素的背景色会同时应用到——内容区+内边距+边框底部（IE6、7有BUG，背景色只会应用到内容区+内边距）
2. background-image属性（CSS3有改动）
- 作用：指定元素的背景图片
- 默认值：none
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：none、图片的URL（相对URL是相对于样式位置）、CSS3新增了使用渐变色来指定背景图像（详见取值和单位篇）
背景图片默认会水平和竖直平铺满整个元素
背景图片会应用在背景色之上，因此使用背景图片时，往往要使用一个相似颜色的背景色，使得在图片不可用时，将背景色显示出来，够保证文本的正常阅读
元素的背景图片只会应用到——内容区+内边距（这个表现都是一致的）
小结
背景属性（背景色，背景图）都是不可继承的
之所以子元素也会拥有和父元素相同的背景，是因为背景色默认值是transparent，而背景图片默认为none，因此只是透过子元素看到了父元素的背景而已
元素的背景色和背景图片还有一个很有意思的地方，假设我们的页面，就包含如下一个div
<div>一行文本</div>
html {background:#F00;}
body {background:#000;}很显然，整个页面都是红色的，只有很小一部分是黑色的
但是如果只是这样呢？
body {background:#000;}你会发现整个页面都是黑色的了，这是因为，HTML规范上说，绘制Web页面的区域首先从html元素上获取背景，如果html元素没有设置的话，则从body元素获取背景，如果都没有设置，则浏览器会设置一个默认值（通常是白色）
除此之外，不存在其他任何属性，能够在文档树中向顶层应用了
所以可以放心的给body设置背景色，而不用担心body元素不够高了
3. background-position属性（CSS3有改动）
- 作用：指定背景图片的位置
- 默认值：0% 0%（等同于left 、top）
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：center、left、right、top、bottom、长度值、百分比
left，top，right，bottom就是使图像放置在左上角，右上角，左下角，右下角，而且顺序是可以随意出现的，因为关键字表达的意思足够明确
background-position: left top ;
background-position: top left;center关键字是相对于图片和元素该方向的中心点来放置
background-position: left center; /*垂直居中*/
background-position: top center; /*水平居中*/
background-position: center center; /*垂直、水平居中显示，不管元素多大*/并且使用关键字时，如果只出现了一个关键字，则另一个关键字是center
使用数值或者百分数时，顺序就有要求了，第一个值必须表示水平方向，第二个值表示竖直方向，除此之外，使用数值和百分数还有很大差别
使用数值时，数值代表从图像左上角到元素内边距左上角的偏移值（通常使用负长度值来定位背景图像）
background-position: 0 0; /*相当于background-position: left top ;*/
background-position: 10px 10px;使用百分数时，情况稍微复杂，因为百分数同时应用于元素和背景图，也就是将图像中描述为X%，Y%的点和元素中描述为X%，Y%的点对齐
background-position: 0% 0%; /*相当于background-position: left top ;*/
background-position: 50% 50%; /*相当于background-position: center ;*/
background-position: 100% 100%; /*相当于background-position: right bottom ;*/其实与关键字的效果是一样的，只不过百分数的表现形式更加多样
注：不管使用什么形式，如果只出现了一个值，那么剩下的那个值，将自动获得center值
各种属性值还可以混合使用；
background-position: center 0; /*永远使背景图水平居中，而不管容器大小*/CSS3新增了偏移量的用法（只在使用关键字的时候有效），即在关键字后面指定偏移的距离
/*定义背景图像在容器右下方，并且距离右边和底部各有20px*/
background:url(1.jpg) right 20px bottom 20px;4. background-repeat属性（CSS3有改动）
- 作用：指定背景图片的平铺方式
- 默认值：repeat
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：repeat（水平竖直平铺）、repeat-x（水平）、repeat-y（竖直）、no-repeat（不平铺）、round（缩放平铺）、space（间隔平铺）
水平（竖直）平铺，是从原图像开始同时向左右（上下）平铺（当把背景图像居中之后就看出这种效果来了）
CSS3新增了round和space关键字，并且可以指定两个参数了，如果提供全部2个参数，第1个用于横向，第二个用于纵向。如果只提供1个参数，则用于横向和纵向（repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat）
5. background-attachment属性（CSS3有改动）
- 作用：指定背景图片随滚动轴的移动方式
- 默认值：scroll
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：fixed、scroll、local
scroll值
背景图像相对于元素固定（背景图像总是要跟着元素本身），也就是说当元素内容滚动时背景图像不会跟着滚动，但会随元素的祖先元素或窗体一起滚动
fixed值
背景图像相对于窗体固定
local（CSS3新增）
背景图像相对于元素内容固定（背景图像总是要跟着内容），也就是说当元素随元素滚动时背景图像也会跟着滚动
不管使用哪种方式，定位的位置都是由background-position决定
使用了fixed之后，当图像滚动到background-position指定的位置之后，就不再随文档滚动了
注：视差滚动就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样
IE6不支持只支持body或html元素上的fixed值
6. background-origin属性（CSS3新增）
- 作用：指定背景图片计算background-position时的参考位置
- 默认值：padding-box
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：padding-box、border-box、content-box
取值含义
padding-box：从padding（包含padding）区域开始显示背景图像（默认）
border-box：从border区域（包含border）开始显示背景图像
content-box：从content区域开始显示背景图像
7. background-size属性（CSS3新增）
- 作用：设置背景图片的大小
- 默认值：auto
- 适用于：所有元素
- 继承性：无
- 动画性：有
- 取值：auto、cover、contain、长度值、百分比
取值含义
auto：表明使用背景图的真实大小，默认值
cover：表示将背景图等比缩放到完全覆盖容器（可能导致背景图像超出容器，被遮盖）
contain：表示将背景图等比缩放到宽度或高度与容器的宽度或高度相等（背景图像始终被包含在容器内，但可能导致容器不能完全拥有背景图）
百分比，则相对于容器的宽高
使用方式
该属性提供2个参数值(cover和contain除外)
如果提供两个值，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度
如果只提供一个值，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放
background-size: 100% 100%;
背景图像完全充满容器，但可能会被压缩8. background-clip属性（CSS3新增）
- 作用：指定背景图片向外裁剪的区域
- 默认值：border-box
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：padding-box、border-box、content-box、text
取值含义
padding-box：从padding区域（不含padding）开始向外裁剪背景
border-box：从border区域（不含border）开始向外裁剪背景
content-box：从content区域（不含content）开始向外裁剪背景
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果（字体要设置）
9. 简写background属性（CSS3有改动）
- 作用：指定所有的背景属性
- 默认值：由独立属性决定
- 适用于：所有元素
- 继承性：无
- 动画性：由独立属性决定
取值：由独立属性决定
background:#F00 url(1.jpg) 10px 10px scroll no-repeat;
CSS3中的简写属性，可以设置上面介绍的8个单独的背景属性
只要保证background-position中的两个值在一起，其他顺序都是无所谓的
注：没有必须的值，只要至少出现一个就行（注意默认值的覆盖问题）