网页设计入门--使用css控制背景图像

一、设置背景页面背景颜色

background-color:color;

二、设置背景颜色给页面分块

通过background-color属性，不仅可以设置整个网页页面背景颜色，也可以对页面进行分块，分别设计每个分块的背景颜色

上图对应的代码为：

 1 <html>
 2 <head>
 3 <title>my first text html</title>
 4 <style type="text/css">
 5 
 6 body{
 7 background-color:#CCFF99;
 8 }
 9 .container{
10 width:800px;
11 height:900px;
12 background-color:#FF9900;
13 }
14 .header{
15 width:760px;
16 height:100px;
17 background-color:#99CCCC;
18 margin:10px;
19 }
20 .leftbar{
21 width:200px;
22 height:720px;
23 margin:10px;
24 background-color:#993399;
25 float:left;
26 }
27 .main{
28 width:540px;
29 height:720px;
30 margin:10px;
31 background-color:#CCCC33;
32 float:left;
33 }
34 
35 </style>
36 </head>
37 <body>
38 body
39 <div class="container">container
40 <div class="header">header</div>
41 <div class="leftbar">leftbar</div>
42 <div class="main">main</div>
43 </div>
44 
45 </body>
46 </html>

三、定义背景图片

background-image:url(图片路径);

四、背景图片的重复

background-repeat:repeat-x|repeat-y|no-repeat;

PS:

1、没有定义，则图片会沿x轴和y轴这两个方向重复铺开；

2、如果repeat-x和repeat-y同时出现，则按后一个定义执行；

　　如：background-repeat:repeat-x;

           background-repeat:repeat-y;（图片只沿y轴方向重复铺开）

五、定义背景图片的位置

background-position:center|center center|top left|top center（靠上居中）|top right|center left（靠左居中）|cente right|bottom left|bottom right

background-position:200px（距离页面左侧200px） 40px（距离页面右侧40px）

background-position:40%（水平方向上处于40%的位置） 60%（垂直方向上处于60%的位置）

六、固定背景图片

background-attachment:scroll（图片随文字位置的移动而移动）|fixed（图片不随文字位置的移动而移动）;

如果同时应用以上属性，可以写成background:color url() repeat-x 10px 5px fixed;

posted @ 2015-04-20 12:41  年年  阅读(408)  评论(0)  编辑  收藏  举报