CSS---background属性及其属性值
CSS属性:
background-color/*背景颜色*/
background-image/*背景图片*/
background-repeat/*设置背景图像是否重复,及如何重复*/
background-attachment/*背景图像是否固定或者随着页面的其余部分滚动*/
background-position/*设置背景图像的起始位置*/
background/*简写属性*/
1、background-color:
颜色值通常以以下方式定义:
十六进制 – 如:”#ff0000″
RGB – 如:“rgb(255,0,0)”
颜色名称 – 如:“red”
h1 {background-color:#ff0000;}
p {background-color:rgb(255,0,0);}
div {background-color:red;}
2、background-image:
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
body {background-image:url(\'background.jpg\');}
提示:可以设置一种背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。
body {
background-image:url(\'background.jpg\');
background-color:#ffffff;
}
3、background-repeat:
常用属性:
repeat:背景图像将向垂直和水平方向重复。这是默认
repeat-x:只有水平位置会重复背景图像
repeat-y:只有垂直位置会重复背景图像
no-repeat:背景图像不会重复
例:
body
{
background-image:url(\'background.jpg\');
background-repeat:repeat-y;
}
4、background-position:
left top:左上
left center:左中
left bottom:左下
right top:右上
right center:右中
right bottom:右下
center top:居中置顶
center center:水平垂直居中
center bottom:居中置底
以上这些属性值,只写一个时,另一个默认为center
x% y%:x是水平位置,y是垂直。左上角是0%0%。右下角是100%100%。
xpos ypos:x是水平位置,y是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位
以上两个属性值,只写一个时,另一个为50%
注意:使用该属性,background-attachment必须设置为 “fixed(固定)”.
body
{
background-image:url(\'background.jpg\');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
4、background-attachment:
scroll: 背景图片随页面的其余部分滚动。这是默认
fixed:背景图像是固定的
body
{
background-image:url(\'background.jpg\');
background-repeat:no-repeat;
background-attachment:fixed;
}
5、background简写属性
当使用简写属性时,属性值的顺序为::
1.background-color
2.background-image
3. background-repeat
4. background-attachment
5. background-position
以上属性无需全部使用,你可以按照页面的实际需要使用.
body {background:#ffffff url(\'background.jpg\') no-repeat right top;}