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;}

你可能感兴趣的:(学习)