摘要:
下文讲述css样式对html页面的背景色、背景图片进行相关设置的方法分享,如下所示:
在html中,定义元素的背景信息,可以采用以下css属性,如下所示:
css属性功能
background在此属性中,我们将所有的背景设置都放入此属性值中
background-attachment背景图像是否固定或者随着页面的其余部分滚动
background-color背景颜色设置
background-image背景图片设置
background-position背景图片的开始位置
background-repeat背景图片的重复方式
css 背景色设置举例
---1.设置Body背景颜色--红色
body {background-color:red;}
div{background-color:#f90232;}
p{background-color:RGB(230,1,1);}
/*
颜色值,可以采用以下方式:
1.十六进制颜色信息 #f90232
2.RGB方式 RGB(230,1,1)
3.颜色名称 blue red yellow
*/
css 背景图像设置举例
/*
css 设置背景图片,需使用background-image属性进行相关设置,如下所示:
*/
body
{
background-image:url('maomao365.jpg');
}
/*
在背景图片设置中,我们需使用背景图片的重复方向或是否重复进行相关设置
*/
body
{
background-image:url('maomao365.jpg');
background-repeat:repeat-x; /*背景图横向重复*/
}
body
{
background-image:url('maomao365.jpg');
background-repeat:no-repeat;/*背景图不重复*/
}
/*
背景图 不重复,并且从右上开始
*/
body
{
background-image:url('maomao365.jpg');
background-repeat:no-repeat;
background-position:right top;
}
/*
采用background对背景进行设置
*/
body {background:#0000000 url('maomao365.jpg') no-repeat right top;}
注意事项:
当使用background对背景进行设置时,需按照以下属性的顺序依次列出:
1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position