9.背景样式-CSS基础
一、背景样式
在
CSS中，背景样式包括两个方面：背景颜色、背景图片。 在Web2.0时代，对于元素的背景样式，我们都是使用CSS属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性（不是CSS属性）来为元素定义背景颜色或背景图片。
1.常用背景样式属性
属性 | 说明 |
|---|---|
background-color | 定义背景颜色。 |
background-image | 定义背景图片地址。 |
background-repeat | 定义背景图片重复。 |
background-position | 定义背景图片位置。 |
background-attachment | 几乎用不上。定义背景图片固定。 |
二、背景颜色（background-color）
在
CSS中，使用background-color属性来定义元素背景颜色。
1.背景图片固定
（1）语法格式
background-color:颜色值;① 两种颜色值
颜色值有两种：
- 关键字
- 16进制RGB值
Ⅰ.color属性与background-color属性异同
关键字就是颜色的英文名称。这和
03-字体样式.md中的color属性取值相同，但color属性是定义字体颜色，而background-color属性是定义背景颜色。
三、背景图片（background-image）
在
CSS中，使用background-image属性为元素定义背景图片。
1.背景图片的使用
（1）语法格式
background-image:url(图片路径);① 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>背景样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
div{
width:224px;
height: 224px;
background-image: url(../作业/images/js3.jpg); /*引入背景图片*/
}
span{
color: #00FFFF; /*定义字体样式，设置字体颜色*/
}
</style>
</head>
<body>
<div>
<span>
是毛毛啊(●'◡'●)
</span>
</div>
</body>
</html>
背景图片(background-image).png
（2）background-image与img属性异同
① 设置宽高
在上例中，若是不为
div元素设置width、height属性是不会显示图片的，因为没有设置时宽度和高度都为0，所以背景图片不会显示，所以在使用background-image属性前一定要看看元素是否设置了宽高。 而在img元素中设置width、height属性，是定义了图片的大小。
② 用法
背景图片是使用
CSS来实现的，而图片是使用HTML来实现的。
③ 用途
大多数情况下都是使用图片
img元素来实现，但在某些场合无法使用图片的的时候再考虑背景图片。
四、背景图片重复（background-repeat）
在
CSS中，使用background-repeat属性来定义背景图片的重复方式。
1.背景图片重复的使用
（1）语法格式
background-repeat:取值;① background-repeat属性值
属性值 | 说明 |
|---|---|
repeat | 在水平方向和垂直方向上同时平铺（默认值） |
repeat-x | 只在水平方向(x轴)上平铺 |
repeat-y | 只在垂直方向(y轴)上平铺 |
no--repeat | 不平铺 |
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>背景样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
div{
width:160px;
height: 160px;
border: 1px solid #66A9FE;
background-image: url(../img/favicon.ico); /*引入背景图片，16*16*/
}
#div2{
background-repeat: repeat-x; /*只在水平方向(x轴)上平铺*/
border: 1px solid orangered;
}
#div3{
background-repeat: repeat-y; /*只在垂直方向(y轴)上平铺*/
border: 1px solid #000000;
}
#div4{
background-repeat: no-repeat; /*不平铺*/
}
</style>
</head>
<body>
<div id="div1"></div> <!--默认，水平垂直方向同时平铺-->
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
背景图片重复(background-repeat)示例1.png
（2）元素大小必须大于图片大小
元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果。
五、背景图片位置（background-position）
在
CSS中，使用background-aposition属性来定义背景图片的位置。
1.背景图片位置的使用
（1）语法格式
background-position:像素值/关键字;
<!--属性常用取值有2种: 关键字、像素值-->① 像素值
Ⅰ.语法格式
background-position:水平距离 垂直距离;水平距离 和 垂直距离这两个数值之间要用空格隔开，二者取值都是像素值。
② 关键字
Ⅰ.语法格式
background-position:水平距离关键字 垂直距离关键字;Ⅱ.关键字取值
属性值 | 说明 |
|---|---|
top left | 左上角 |
top center | 靠上居中 |
top right | 右上 |
left center | 靠左居中 |
center center | 正中 |
right center | 靠右居中 |
bottom left | 左下 |
bottom center | 靠下居中 |
bottom right | 右下 |
③ 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>背景样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
#div1{
width:1000px;
height: 500px;
border: 1px solid #66A9FE;
background-image: url(../img/pika.jpg); /*引入背景图片，16*16*/
background-repeat: no-repeat; /*不平铺*/
background-position: top right ; /*右上*/
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
背景图片位置(background-position)示例1.png
（2）实际开发
在实际开发中，
background-position属性一般用于实现CSS Spirit（精灵图片）。
① CSS Sprites
CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式，其实就是把网页中一些背景图片整合到一张图片文件中。 再利用CSS的background-image、background-repeat、background-position的组合进行背景定位。 在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，因此访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，但随之而来的增加内存消耗，然而CSS Sprites图片繁琐的合成等缺点在网站性能提升面前，也就不足为道了。
Ⅰ.CSS Sprites 的优点：
- 减少了图片的字节。
- 减少了网页的
http请求，从而大大的提高了页面的性能。 - 减少命名麻烦的问题
Ⅱ.CSS Sprites 的缺点：
- 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
- 在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂。
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。
六、背景图片固定（background-attachment）
在
CSS中，使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
1.背景图片固定的使用
（1）语法格式
background-attachment:取值;① background-attachment属性值
属性值 | 说明 |
|---|---|
scroll | 随元素一起滚动（默认值） |
fixed | 固定不动 |
（2）实际开发
在实际开发中，
background-attachment属性几乎用不上，了解即可。