在
CSS
中,背景样式包括两个方面:背景颜色、背景图片。 在Web2.0
时代,对于元素的背景样式,我们都是使用CSS
属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性(不是CSS属性)来为元素定义背景颜色或背景图片。
属性 | 说明 |
---|---|
background-color | 定义背景颜色。 |
background-image | 定义背景图片地址。 |
background-repeat | 定义背景图片重复。 |
background-position | 定义背景图片位置。 |
background-attachment | 几乎用不上。定义背景图片固定。 |
在
CSS
中,使用background-color属性
来定义元素背景颜色。
background-color:颜色值;
颜色值有两种:
关键字就是颜色的英文名称。这和
03-字体样式.md
中的color属性取值
相同,但color属性
是定义字体颜色,而background-color属性
是定义背景颜色。
在
CSS
中,使用background-image属性
为元素定义背景图片。
background-image:url(图片路径);
<!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
在上例中,若是不为
div元素
设置width、height属性
是不会显示图片的,因为没有设置时宽度和高度都为0
,所以背景图片不会显示,所以在使用background-image属性
前一定要看看元素是否设置了宽高。 而在img元素
中设置width、height属性
,是定义了图片的大小。
背景图片是使用
CSS
来实现的,而图片是使用HTML
来实现的。
大多数情况下都是使用图片
img元素
来实现,但在某些场合无法使用图片的的时候再考虑背景图片。
在
CSS
中,使用background-repeat属性
来定义背景图片的重复方式。
background-repeat:取值;
属性值 | 说明 |
---|---|
repeat | 在水平方向和垂直方向上同时平铺(默认值) |
repeat-x | 只在水平方向(x轴)上平铺 |
repeat-y | 只在垂直方向(y轴)上平铺 |
no--repeat | 不平铺 |
<!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
元素的宽度和高度必须大于背景图片的宽度和高度,才会有重复效果。
在
CSS
中,使用background-aposition属性
来定义背景图片的位置。
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 | 右下 |
<!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
在实际开发中,
background-position属性
一般用于实现CSS Spirit
(精灵图片)。
CSS Sprites
叫 CSS精灵或者雪碧图,是一种网页图片应用处理方式,其实就是把网页中一些背景图片整合到一张图片文件中。 再利用CSS
的background-image、background-repeat、background-position
的组合进行背景定位。 在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,因此访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,但随之而来的增加内存消耗,然而CSS Sprites图片繁琐的合成等缺点在网站性能提升面前,也就不足为道了。
http请求
,从而大大的提高了页面的性能。CSS Sprites
在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的CSS
,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动CSS。在
CSS
中,使用background-attachment属性
来定义背景图片是随元素一起滚动还是固定不动。
background-attachment:取值;
属性值 | 说明 |
---|---|
scroll | 随元素一起滚动(默认值) |
fixed | 固定不动 |
在实际开发中,
background-attachment属性
几乎用不上,了解即可。