码迷,mamicode.com
首页 > Web开发 > 详细

Css背景

时间:2016-08-08 12:18:12      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

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 }

 

Css背景

标签:

原文地址:http://www.cnblogs.com/UniqueColor/p/5748514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!