义乌网页制作讲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: 继承