index.html
1 2 3 4 5Insert title here 6 7 8 9测试一下背景是否可以继承(不能)
10 11
css
1 body{2 background-color:gray; /*设置背景颜色 */3 }4 p{5 6 padding: 10px; /*设置内边框 */7 width: 150px; /*设置宽度 */8 background-color: red;9 }
效果:
2、设置图片背景
css代码:设置body的背景图片
body{ background-image: url("img.jpg");}
设置单个标签的背景图片
p{ width: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 }