义乌网页制作讲CSS背景

义乌网页制作讲CSS背景
背景(background),文字颜色可以使用color属性,但是包含文字的p段落,div层,page页面等的颜色与背景图片可以使用与background等属性.
通常使用background-color定义背景颜色,background-image定义背景图片,background-repeat定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.
第一节：CSS background-color 属性
background-color -- 背景色,定义背景的颜色
 取值: <color> | transparent | inherit
 <color>: 颜色表示法
 transparent: 透明
 inherit: 继承
 初始值: transparent
 继承性: 是
 适用于: 所有元素
 background:背景.color:颜色.
示例
body
{
 background-color:green;
}
第二节：CSS background-image 属性
background-image -- 定义背景图片
 取值: <url> | none | inherit
 none: 无
 inherit: 继承
 初始值: none
 继承性: 否
 适用于: 所有元素
 background:背景.image:图片.
示例
body
{
 background-image:url('html_table.png');
}
p
{
 background-image:none;
}
div
{
 background-image:url('list-orange.png');
}
第三节：CSS background-repeat 属性
background-repeat -- 定义背景图片的重复方式
 取值: repeat | repeat-x | repeat-y | no-repeat | inherit
 repeat: 平铺整个页面,左右与上下
 repeat-x: 在x轴上平铺,左右
 repeat-y: 在y轴上平铺,上下
 no-repeat: 图片不重复
 inherit: 继承
 初始值: repeat
 继承性: 否
 适用于: 所有元素
 background:背景.repeat:重复.
示例
body
{
 background-image:url('list-orange.png');
 background-repeat:no-repeat;
}
div
{
 background-image:url('list-orange.png');
 background-repeat:repeat-y;
 background-position:right;
}
第四节：CSS background-position 属性
background-position -- 定义背景图片的位置
 取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
 水平   left: 左 center: 中 right: 右
 垂直   top: 上 center: 中 bottom: 下
 垂直与水平的组合  x-% y-%   x-pos y-pos
示例
body
{
 background-image:url('list-orange.png');
 background-repeat:no-repeat;
}

p
{
 background-image:url('list-orange.png');
 background-position:right bottom ;
 background-repeat:no-repeat;
}

div
{
 background-image:url('list-orange.png');
 background-position:50% 20% ;
 background-repeat:no-repeat;
}
background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.
第五节: CSS background-attachment 属性
background-attachment -- 定义背景图片随滚动轴的移动方式
 取值: scroll | fixed | inherit
 scroll: 随着页面的滚动轴背景图片将移动
 fixed: 随着页面的滚动轴背景图片不会移动
 inherit: 继承
示例
body
{
 background-image:url('list-orange.png');
 background-attachment:fixed;
 background-repeat:repeat-x;
 background-position:center center;
}
第六节：CSS background 属性
background -- 五个背景属性可以全部在此定义
 取值: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit
 [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]: 背景颜色,图像等的一个属性或多个属性
 inherit: 继承