index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <p>测试一下背景是否可以继承(不能)</p> 10 </body> 11 </html>
css
1 body{ 2 background-color:gray; /*设置背景颜色 */ 3 } 4 p{ 5 6 padding: 10px; /*设置内边框 */ 7 150px; /*设置宽度 */ 8 background-color: red; 9 }
效果:
2、设置图片背景
css代码:设置body的背景图片
body{ background-image: url("img.jpg"); }
设置单个标签的背景图片
p{ 200px; background-image: url("img.jpg"); }
设置图片是否重复和起始位置:
1 body{ 2 background-image: url("img.jpg"); 3 background-repeat: no-repeat; /*设置图片是否重复*/ 4 background-position: right top; /*设置图片的起始位置*/ 5 /*right代表从页面的right和从图片的center开始显示*/ 6 /*还可指定具体的数值如0px,0px*/ 7 /*还可指定百分数*/ 8 }
设置图片是否随着内容滚动
1 body{ 2 background-image: url("img.jpg"); 3 background-repeat: no-repeat; /*设置图片是否重复*/ 4 background-attachment: fixed;/*设置图片是否随着内容滚动*/ 5 }
CSS3背景:
设置图片的大小
1 body{ 2 background-image: url("img.jpg"); 3 background-repeat: no-repeat; /*设置图片是否重复*/ 4 background-size:1000px 1000px;/*设置图片的大小*/ 5 }