3. CSS的背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
3.1 背景颜色
background-color属性定义了元素的背景颜色。
background-color: 颜色值;
一般情况下元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色。
3.2 背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
background-image: none | url(url)
参数值 | 作用 |
---|---|
none | 无背景图 |
url | 使用绝对或相对地址指定背景图像 |
3.3 背景平铺
在HTML页面上对背景图进行平铺,可以使用background-repeat属性。
背景图片会压住背景颜色。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺 |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向上平铺 |
3.4 背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思是:x坐标和y坐标,可以使用方位名词或者精确单位
参数值 | 说明 |
---|---|
length | 百分数/由浮点数字和单位标识符组成的长度值 |
position | top / center / bottom / left / center / right 方位名词 |
1.参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致.
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐.
2.参数是精确单位
如果参数是精确单位,那么第一个肯定是x坐标,第二个一定是y坐标
如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
3.参数是混合单位
如果指定的两个是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标
3.5 背景图像固定(背景附着)
background-attachment属性设置背景图像是否或者随着页面的其余部分滚动。
background-attachment后期可以制作视察滚动的效果.
background-attachment:scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像时随对象内容滚动 |
fixed | 背景图像固定 |
3.6 背景复合写法
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top;
3.7 背景色半透明
background: rgba(0,0,0,0.3)
最后一个参数是alpha透明度,取值范围在0~1之间。
我们习惯把0.3的0省略掉,写为background:rgba(0,0,0,.3);
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS新增属性,是IE9+版本浏览器才支持的
综合案例
案例:五彩导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
text-align: center;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.nav .wu1 {
background: url(wu1.jpg) no-repeat;
}
.nav .wu1:hover {
background-image: url(wu11.jpg);
}
.nav .wu2 {
background: url(wu2.jpg) no-repeat;
}
.nav .wu2:hover {
background-image: url(wu22.jpg);
}
.nav .wu3 {
background: url(wu3.jpg) no-repeat;
}
.nav .wu3:hover {
background-image: url(wu33.jpg);
}
.nav .wu4 {
background: url(wu4.jpg);
}
.nav .wu4:hover {
background-image: url(wu1.jpg);
}
.nav .wu5 {
background: url(wu5.jpg);
}
.nav .wu5:hover {
background-image: url(wu3.jpg);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="wu1">五彩导航</a>
<a href="#" class="wu2">五彩导航</a>
<a href="#" class="wu3">五彩导航</a>
<a href="#" class="wu4">五彩导航</a>
<a href="#" class="wu5">五彩导航</a>
</div>
</body>
</html>
当鼠标移动到导航栏的时候,会变色。