css背景
前言
通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置
- 背景颜色：background-color
- 背景图片：background-image
- 背景平铺：background-repeat
- 背景图片位置：background-position
- 背景图像固定：background-attachment
背景颜色
background-color 属性定义了元素的背景颜色。
background-color:颜色值;
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色
背景图片
background-image 属性设置元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置 (精灵图也是一种运用场景)
background-image: url();
注意：背景图片后面的地址，千万不要忘记加 URL
属性
| 值 | 说明 |
|---|---|
| url('URL') | 图像的URL |
| none | 无图像背景会显示。这是默认 |
| linear-gradient() | 创建一个线性渐变的 "图像"(从上到下) |
| radial-gradient() | 用径向渐变创建 "图像"。 (center to edges) |
| repeating-linear-gradient() | 创建重复的线性渐变 "图像"。 |
| repeating-radial-gradient() | 创建重复的径向渐变 "图像" |
| inherit | 指定背景图像应该从父元素继承 |
背景平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
body {
background-image:url('paper.gif');
background-repeat:repeat-y;
}
属性
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x | 只有水平位置会重复背景图像 |
| repeat-y | 只有垂直位置会重复背景图像 |
| no-repeat | background-image不会重复 |
| inherit | 指定background-repea属性设置应该从父元素继承 |
背景图片位置
通过 CSS 背景属性 background-position，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
参数是方位名词
- 水平：left center right
- 垂直：top center bottom
注意：
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是像素单位
background-position: 20px 50px;
-
盒子左上角为坐标原点
-
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
-
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
参数是比例单位
background-position: x% y%;
- 第一个值是水平位置，第二个值是垂直
- 左上角是0％0％。右下角是100％100％
- 如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
背景图像固定（背景附着）
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
| 值 | 描述 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量，当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
这是实际开发中，我们更提倡的写法
背景色半透明
background: rgba(0， 0， 0， 0.3);
- 最后一个参数是 alpha 透明度，取值范围在 0~1之间
- 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0， 0， 0， .3);
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3 新增属性，是 IE9+ 版本浏览器才支持的
- 但是现在实际开发，我们不太关注兼容性写法了，可以放心使用
总结
案例：五彩导航
练习价值:
-
链接属于行内元素，但是此时需要宽度高度，因此需要模式转换.
-
里面文字需要水平居中和垂直居中， 因此需要单行文字垂直居中的代码.
-
链接里面需要设置背景图片，因此需要用到背景的相关属性设置.
-
鼠标经过变化背景图片，因此需要用到链接伪类选择器
<div class="nav">
<a href="#" id="bg1">五彩导航</a>
<a href="#" id="bg2">五彩导航</a>
<a href="#" id="bg3">五彩导航</a>
<a href="#" id="bg4">五彩导航</a>
</div>
<style>
.nav a {
display: inline-block;
width: 128px;
height: 58px;
color: #fff;
text-align: center;
line-height: 48px;
text-decoration: none;
}
.nav #bg1 {
background-image: url("images/bg1.png");
}
.nav #bg1:hover {
background-image: url("images/bg11.png");
}
.nav #bg2 {
background-image: url("images/bg2.png");
}
.nav #bg2:hover {
background-image: url("images/bg22.png");
}
.nav #bg3 {
background-image: url("images/bg3.png");
}
.nav #bg4 {
background-image: url("images/bg4.png");
}
</style>
/*此处省略了3、4的伪类选择器，与1、2同理*/
