今天我们分享关于背景样式的内容。
在css中,背景样式主要有两种:背景颜色和背景图像。在传统的web 1.0时代中,一般都是使用元素的backgroud属性,来为body、table和td等少数的标签定义背景图像。
在web 2.0时代,主要是使用css的background属性来定义。
背景图像:
背景图像的属性 | |
属性 | 说明 |
background-image | 定义背景图像的路径 |
background-repeat | 定义背景图像显示方式,如纵向平铺、横向平铺 |
background-position | 定义背景图像在元素哪个位置 |
background-attachment | 定义背景图像的滚动 |
背景颜色background-color:
语法:
background-color:颜色值;
颜色值可以是关键字,也可以是16进制的RGB值。
示例代码:
<html>
<head>
<title>背景颜色</title>
<style type="text/css">
div
{
width:200px;
height:80px;
border: 1px solid black;
}
#d1 {background-color:red;}
#d2 {background-color:#f3de3f;}
#d3 {background-color:#0af7fb;}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
背景图像background-image:
它定义了背景图像的来源,与HTML中img标签一样。
语法:
background-image:url("路径地址");
示例代码:
<html>
<head>
<title>背景图像</title>
<style type="text/css">
#d1
{
width:150px;
height:300px;
background-image:url("images/1.jpg");
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
设定背景图像时,需要设定宽度和高度,与图片的宽高相同,效果才能出来的。图片自己可以用画图板随便画一张,路径保存成代码中的路径,就可以看出效果了。
背景重复background-repeat:
显示方式有两种,水平平铺和纵向平铺,
语法:
background-repeat:取值;
background-repeat属性取值 | |
值 | 说明 |
no-repeat | 不平铺 |
repeat | 默认值,水平和垂直同时平铺 |
repeat-x | 水平x轴平铺 |
repeat-y | 垂直y轴平铺 |
示例代码:
<html>
<head>
<title>背景重复</title>
<style type="text/css">
div
{
width:800px;
height:200px;
border: 1px solid black;
margin-bottom: 20px;
background-image:url("images/2.png");
}
#d1 { background-repeat:no-repeat;}
#d2 { background-repeat:repeat-x;}
#d3 { background-repeat:repeat-y;}
#d4 { background-repeat:repeat;}
</style>
</head>
<body>
<div id="d1">no-repeat</div>
<div id="d2">repeat-x</div>
<div id="d3">repeat-y</div>
<div id="d4">repeat</div>
</body>
</html>
背景位置background-position:
定义背景图像的横向位置和纵向位置,它只能应用于块元素和替换元素。替换元素包括img,input,textarea,select和object。
语法:
background-position:像素值或关键字;
示例代码:
<html>
<head>
<title>背景位置</title>
<style type="text/css">
#d1
{
width:500px;
height:500px;
border: 1px solid black;
background-image:url("images/1.jpg");
background-repeat:no-repeat;
backgronnd-position: 50px 60px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
设定position时,需要x轴和y轴,用像素值,两值之间用空格分隔开。同时还需要指定no-repeat。水平x轴和垂直y轴的坐标系需要大家自己理解一下了,坐标原点在左上角,可以理解为第四象限。
background-position关键字取值 | |
值 | 说明 |
top left | 左上 |
top center | 靠上居中 |
top right | 右上 |
left center | 靠左居中 |
center center | 正中 |
right center | 靠右居中 |
bottom left | 左下 |
bottom center | 靠下居中 |
bottom right | 右下 |
示例代码:
<html>
<head>
<title>背景位置关键字</title>
<style type="text/css">
#d1
{
width:500px;
height:500px;
border:1px solid black;
background-image:url("images/1.jpg");
background-repeat:no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
背景跟随background-attachment:
它是设定背景图像随对象滚动还是固定不动。
语法:
background-attachment:scroll或者fixed;
scroll表示背景图像随对象滚动,是默认值,fixed表示背景图像固定在页面上不动。
示例代码:
<html>
<head>
<title>背景滚动</title>
<style type="text/css">
#d1
{
width:500px;
height:500px;
border:1px solid black;
background-image:url("images/1.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
设定为fixed后,大家会发现背景图片位于屏幕上的位置就不发生变化了,像固定住了。