1.背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
<style>
.box{
width: 100px
;
height: 100px
;
background-color: #f00
;
}
</style>
</head>
<body>
<div class=
"box"></div>
</body>
</html>
下面是效果图： 图一
注意：
background-color 用于给元素设置背景颜色，但是前提这个元素要么有内容，要么有宽度和高度才可以
2.背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
.box{
width: 1000px
;
height: 1000px
;
background-image: url(图片地址);
}
</style>
</head>
<body>
<div class=
"box"></div>
</body>
</html>
效果图如下 background-image 用于给元素设置背景图片，图片的地址一定放在 url(图片地址)，但是这个元素要么有内容，要么有宽度和高度才可以，背景图片默认是平铺的
图二
... ...
<body>
<img src=
"图片地址">
<div class=
"box"></div>
</body>
... ...
图三
上图是img标签的效果，可以看到就是插入一张图拍，并不是设置背景图
3.背景图片平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片平铺</title>
<style>
.box{
width: 1000px
;
height: 1000px
;
background-image: url(图片地址);
background-repeat: repeat
;
}
</style>
</head>
<body>
<div class=
"box"></div>
</body>
</html>
效果如图二所示
... ...
background-image: url(图片地址);
border:1px solid #f00
;
background-repeat: repeat-x
;
}
</style>
... ...
效果如下：
background-repeat: repeat-y
;
垂直平铺效果：
background
-repeat
: no
-repeat
;
效果如下：
background-repeat 是用于设置背景图片是否平铺，repeat（是平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）、no-repeat（不平铺）
4.背景图片的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片平铺</title>
<style>
.box{
width: 1000px
;
height: 600px
;
border: 1px solid #000
;
margin-right: auto
;
margin-left: auto
;
background-image: url(图片地址);
background-repeat: no-repeat
;
background-position: right top
;
}
</style>
</head>
<body>
<div class=
"box"></div>
</body>
</html>
效果图：
background-position 用于设置背景图片的位置。如果要设置背景图片的位置，这个属性就会有两个值
background-position水平位置、垂直位置，这两个位置的表示方式有三种 ：英文单词、固定值、百分比
英文单词的表示方式
水平位置：left(居左)、 center(居中) 、right(居右)
垂直位置：tou(居上)、 center(居中) 、bottom(居下)
固定值的表示如下：
background-position: 100px 100px
;
效果图如下，图片的左上定点距上面的线和它左面的线距离是我们设置的100px
百分比的表示效果如下：
效果如下：
以上三种位置的表示方式是可以混合使用的
cssbackground-position: 100px top
;
效果如下：
5.设置背景图片简写属性
background：简写属性 它可以同时设置多个样式 比如背景颜色，背景图片、背景图片是否平铺，水平位置、垂直位置background：简写属性 其他的个数不定 顺序也不定每一个值之前使用空格分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片平铺</title>
<style>
.box{
width: 1000px
;
height: 600px
;
border: 1px solid #f00
;
margin-right: auto
;
margin-left: auto
;
background:#ccc
url(图片地址) no-repeat center center
;
}
</style>
</head>
<body>
<div class=
"box"></div>
</body>
</html>
效果如下：
