HTML + CSS - 4. CSS 背景

1. 背景颜色

background-color 属性定义了元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent;

2. 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景）

background-image : none | url (url)

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

3. 背景平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

4. 背景位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。第二个值将用于纵坐标。纵坐标将默认为50%。

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐

1. 参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3. 参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5. 背景附着

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment 后期可以制作视差滚动的效果

background-attachment : scroll | fixed

设置或检索背景图像是随对象内容滚动还是固定的

6. 背景简写

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：
background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) no-repeat fixed center top ;

7. 背景色半透明

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

background: rgba(0, 0, 0, .3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

8. 背景缩放

通过background-size设置背景图片的尺寸

background-size: 宽度高度;

插入的图片 img 直接通过 width 和height 设置大小
背景图片设置大小用 background-size

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小（等比例缩放）：cover 或 contain

设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
设置为contain会自动调整缩放比例（高或宽有一个与盒子一致就不再缩放），保证图片始终完整显示在背景区域。可能会有未被覆盖的区域

我们尽量只改一个值，防止缩放失真扭曲

9. 多重背景

//   x y/宽 高
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px,
url(test2.jpg) no-repeat scroll 10px 20px/70px 90px,
url(test3.jpg) no-repeat scroll 10px 20px/110px 130px #aaa;

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上

王者导航栏（鼠标经过添加背景图）

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>body {background-color: #000;}a {width: 200px;height: 50px;display: inline-block;/* 把a 行内元素转换为行内块元素 */text-align: center;/* 文字水平居中 */line-height: 50px;/* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */color: #fff;font-size: 22px;text-decoration: none;/* 取消下划线 文本装饰 */}a:hover {/* 鼠标经过 给我们的链接添加背景图片*/background: url(images/h.png) no-repeat;}</style></head><body><a href="#">专区说明</a><a href="#">申请资格</a><a href="#">兑换奖励</a><a href="#">下载游戏</a></body>
</html>

效果图：