義烏網(wǎng)頁(yè)制作講CSS背景

義烏網(wǎng)頁(yè)制作講CSS背景
背景(background),文字顏色可以使用color屬性,但是包含文字的p段落,div層,page頁(yè)面等的顏色與背景圖片可以使用與background等屬性.
通常使用background-color定義背景顏色,background-image定義背景圖片,background-repeat定義背景圖片的重復(fù)方式,background-position定義背景圖片的位置,background-attachment定義背景圖片隨滾動(dòng)軸的移動(dòng)方式.
第一節(jié)：CSS background-color 屬性
background-color -- 背景色,定義背景的顏色
 取值: <color> | transparent | inherit
 <color>: 顏色表示法
 transparent: 透明
 inherit: 繼承
 初始值: transparent
 繼承性: 是
 適用于: 所有元素
 background:背景.color:顏色.
示例
body
{
 background-color:green;
}
第二節(jié)：CSS background-image 屬性
background-image -- 定義背景圖片
 取值: <url> | none | inherit
 none: 無(wú)
 inherit: 繼承
 初始值: none
 繼承性: 否
 適用于: 所有元素
 background:背景.image:圖片.
示例
body
{
 background-image:url('html_table.png');
}
p
{
 background-image:none;
}
div
{
 background-image:url('list-orange.png');
}
第三節(jié)：CSS background-repeat 屬性
background-repeat -- 定義背景圖片的重復(fù)方式
 取值: repeat | repeat-x | repeat-y | no-repeat | inherit
 repeat: 平鋪整個(gè)頁(yè)面,左右與上下
 repeat-x: 在x軸上平鋪,左右
 repeat-y: 在y軸上平鋪,上下
 no-repeat: 圖片不重復(fù)
 inherit: 繼承
 初始值: repeat
 繼承性: 否
 適用于: 所有元素
 background:背景.repeat:重復(fù).
示例
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;
}
第四節(jié)：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屬性是通過(guò)平面上的x與y坐標(biāo)定位的,所以通常取兩個(gè)值.
第五節(jié): CSS background-attachment 屬性
background-attachment -- 定義背景圖片隨滾動(dòng)軸的移動(dòng)方式
 取值: scroll | fixed | inherit
 scroll: 隨著頁(yè)面的滾動(dòng)軸背景圖片將移動(dòng)
 fixed: 隨著頁(yè)面的滾動(dòng)軸背景圖片不會(huì)移動(dòng)
 inherit: 繼承
示例
body
{
 background-image:url('list-orange.png');
 background-attachment:fixed;
 background-repeat:repeat-x;
 background-position:center center;
}
第六節(jié)：CSS background 屬性
background -- 五個(gè)背景屬性可以全部在此定義
 取值: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit
 [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]: 背景顏色,圖像等的一個(gè)屬性或多個(gè)屬性
 inherit: 繼承