<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS背景色</title>
<style type="text/css">
p{
/*背景色*/
background:gray;
}
div{
/*背景图片*/
width: 470px;
height: 424px;
background-image:url(bibi.jpg);
}
.div_1{
/*背景水平重复*/
width: 600px;
height:800px;
background-image:url(bibi.jpg);
background-repeat:repeat-x;
}
.div_2{
/*背景垂直重复*/
width: 600px;
height:800px;
background-image:url(bibi.jpg);
background-repeat:repeat-y;
}
.div_3{
/*背景不允许重复*/
width: 600px;
height:800px;
background-image:url(bibi.jpg);
background-repeat:no-repeat;
}
.div_4{
/*背景定位*/
background-image:url(bibi.jpg);
background-repeat:no-repeat;
/*居中
background-position:center;
*/
/*右上角
background-position:right;
*/
/*中部上方*/
background-position:top;
/*其他关键词(关键字成双出现):bottom ==(bottom center 或 center bottom),left == (left center 或 center left)
百分数值:利用百分进行定位
background-position:50% 50%;
长度值:元素内边距区左上角的偏移。
background-position:50px 100px;
*/
height: 500px;
}
body{
/*背景关联*/
background-image:url(bibi.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>背景色</p>
<div>背景图片</div>
<div class="div_1">背景水平重复</div>
<div class="div_2">背景垂直重复</div>
<div class="div_3">不允许重复</div>
<p class="div_4">背景定位</p>
</body>
</html>
在学习过程中背景的设置属性多种多样,在使用背景重复(background-repeat:no-repeat/repeat-x/repeat-y)时必须存在引用的背景图片(background-image:url(bibi.jpg))