网页设计入门--使用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;
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
