CSS之背景篇

1、背景颜色-background-color

在CSS中，使用background-color属性来控制元素的背景颜色。

默认值：transparent ，即背景是透明的。

颜色值

1）使用关键字

关键字指的就是颜色的英文名称，如red、blue、green等。

2）使用16进制

十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

3）使用RGB 颜色

RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

4）使用RGB 颜色

RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
所以透明可以写成transparent或者rgba(X, X, X, 0)

2、背景图像-background-image

background-image:url(images/1.jpg);

CSS背景图像常用属性

属性	说明
background-repeat	定义背景图像是否重复
background-position	定义背景图像在元素哪个位置
background-attachment	定义背景图像是否随内容而滚动
background-size	定义背景图片的大小
background-origin	规定背景图片的定位区域
background-clip	将背景图片根据实际需要进行剪切

1）background-repeat

语法：
background-repeat：<repeat-style> [ , <repeat-style> ]*

<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}

默认值：repeat

属性	说明
repeat	默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
no-repeat	表示不平铺
repeat-x	表示在水平方向（x轴）平铺
repeat-y	表示在垂直方向（y轴）平铺
space	背景图像以相同的间距平铺且填充满整个容器或某个方向
round	背景图像自动缩放直到适应且填充满整个容器

** space效果图**：

space效果图.png

** round效果**：

round效果.png

2）background-position

语法：
** background-position *：<position> [ , <position> ]

<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

默认值：0% 0%，效果等同于left top

background-position的取值有3种，像素值、关键字、百分比
(1) 像素值

background-position:80px 40px;

(2) 关键字

属性	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

(3) 百分比

background-position:50% 50%;

考试遇到的坑，主要没看清题目意思。。

（多选）已知一个元素做了以下设置：width:100px; height:100px; padding:10px; background:url(x.png) no-repeat;请问增加以下哪些CSS可以改变这张背景图的位置？
A.background-position:0 0;
B.background-position:0% 0%;
C.background-position:50% 50%
D.background-position:0%;

答案：CD
当时看成了哪些属性可以设置position的位置，然后选择了ABCD
而实际background-position默认在左上角，也就是A和B都是一个意思，默认在左上角的，还有top left 。题目考的是哪个属性可以改变位置，所以选CD。

注意：background-position如果只指定了一个值，那么另外一个值就是center或者50%。

3）background-attachment

在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。
语法：
background-attachment：<attachment> [ , <attachment>]*

<attachment> = fixed | scroll | local

默认值：scroll

属性	说明
fixed	背景图像相对于窗体固定。
scroll	背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，但会随元素的祖先元素或窗体一起滚动。
local	背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动。（CSS3）

借鉴一下别人的解释：

这是一个元素P。当你的指针在P外时，滚动的是P本身。当你的指针在P内时，滚动的是P的内容。也就是说，当你滚动P本身时，local和scroll，背景都会随P的位置滚动，fixed不会。
而当你滚动P的内容时，scroll背景不会随滚动而滚动，local则会随滚动而滚动。

4）background-size

在CSS3中，我们可以使用background-size属性来设置背景图片的大小，这使得我们可以在不同的环境中重复使用背景图片。
语法：
background-size : auto | <长度值> | <百分比> | cover | contain

background-size的值同样有三种表现形式

(1) 关键字

关键字	说明
cover	即“覆盖”，将背景图片以等比缩放来填充整个容器元素
contain	即“容纳”，将背景图片等比缩放至某一边紧贴容器边缘为止
auto	默认值，不改变背景图片的原始高度和宽度

(2) 像素值

background-size : 50px 50px;

将背景图片宽、高依次设置为50px
如果只设置一个值时，那么就将该值作为图片宽度值来等比缩放

(3) 像素值
0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以百分比得出的数值

坑之所在
百分比的参照并不是图片本身，而是图片的容器。
举个栗子，一张100px100px的图片作为200px300px容器的背景图，设置background-size：50% 50%，辣么图片最终大小为100px*150px，不但没有缩小成原本大小的50%，反而会变大！还可能产生拉伸的效果。

例1

如果只设置一个值，如background-size：50%，辣么图片的宽为200px*50%=100px，高度按宽度等比例缩放，宽度没变，所以图片大小不会变。

例2

5）background-origin

在CSS3中，我们可以使用background-origin属性来设置元素背景图片显示的最开始位置。

语法：background-origin ： border-box | padding-box | content-box;

属性值	说明
border-box	表示背景图片是从边框开始显示
padding-box	表示背景图片是从内边距开始显示（默认值）
content-box	表示背景图片是从内容区域开始显示

效果如下：

图片来自http://www.w3school.com.cn/

注意：

如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
当background-attachment设置为fixed时，这个属性无效，从边框开始显示，设置为scroll或者local时，默认从内边距开始显示。

6）background-clip

在CSS3中，使用background-clip属性来将背景图片根据实际需要进行剪切。
语法：background-clip ： border-box | padding-box | content-box | no-clip

属性值	说明
border-box	默认值，表示从边框border开始剪切
padding-box	表示从内边距padding开始剪切
content-box	表示从内容区域content开始剪切
No-clip	不裁切，和参数border-box显示同样的效果

background-clip默认值为border-box。

效果如下图所示：