先做一个简单的HTML页面,页面里只有一个div和一段文字。
要添加整个页面的背景图片,我们就只能把背景加到body标签里了,所以我们在body里添加一个样式,叫‘bg’
然后定义这个bg的样式规则,主要就是添加background-image样式,就是添加背景图。
background-repeat是让背景图铺满整个页面。
看下页面的效果,可以看到现在整个页面都铺满了蝴蝶这张图片了。为了更好的效果,大家可以更换一张更好看的背景图。
HTML边距和背景图片的设置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css属性</title> <style> <!-- p{ --> <!-- color: #FF0000; --> <!-- font-size: 30px; --> <!-- text-align: center; --> <!-- line-height: 200px; --> <!-- /* --> <!-- border 边框 --> <!-- */ --> <!-- border: 1px solid red; --> <!-- } --> div{ border: 1px solid red; /* 尺寸 */ height: 1482px; width: 1000px; /* 背景 */ background: url("image/1.jpg") no-repeat center; } p{ color:red; font-size:13px; font-family:'楷体'; } </style></head><body> <!-- <p>你好</P> --> <div><p>你是我得不到的女孩</p> </div></body></html>