一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS backgrounds</title>
<style>
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
body {
background-image: url('paper.gif');
background-color: #cccccc;
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>CSS background-color实例!</h1>
<div>改文本插入在div元素中.</div>
<p>该段落有自己的背景颜色</p>
<p>背景图片不重复,设置position实例</p>
<p>背景图片只显示一次,并与文本分开</p>
<p>实例中还添加了margin-right属性用于让图片与文本间隔开</p>
</body>
</html>
参考资料:《菜鸟教程》