Css背景

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     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 }

 

posted @ 2016-08-08 11:09  UniqueColor  阅读(249)  评论(0)  编辑  收藏  举报