義烏網頁制作講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: 繼承