背景属性

释放双眼,带上耳机,听听看~!

背景属性

例如,让背景图片居中:

body
{
background-image:url('1.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

背景样式的值可以简写,简写顺序:

简写顺序: 背景颜色 > 背景图片background-image > 背景图片是否重复以及重复方向background-repeat > 背景图片是否随文字滚动background-attachment > 背景图片起始位置background-position

例如:

body
{
background:yellow url('1.jpg') no-repeat fixed 20px 30px;
}

表格1.1——背景样式

序号 属性 属性值 作用
1 background-color 颜色值 颜色作为背景颜色
2 background-image 图片位置 图片作为背景图片
3 background-repeat repeat、repeat-x、repeat-y、no-repeat 背景图片的重复方向
4 background-attachment scroll、fixed 背景是否随滚动条滚动
5 background-position 见详细表格 背景图像的起始位置
6 background 背景样式的值复合属性值组合

表格1.2——background-position属性列表

描述 备注
top left 顶端对齐 左对齐 如果仅规定了一个关键词,那么第二个值将是“center”。默认值:0% 0%
top center 顶端对齐 居中
top right 顶端对齐 右对齐
center left 垂直居中 左对齐
center center 垂直居中 水平居中
center right 垂直居中 右对齐
bottom left 底端对齐 左对齐
bottom center 底端对齐 居中
bottom right 底端对齐 右对齐
x% y% 第一个值是水平位置,第二个值是垂直位置。                      左上角是0% 0%,右下角是100% 100%。 如果仅规定了一个值,另一个值将是50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。                            左上角是 0 0,单位是像素(0px 0px)或任何其他的CSS单位。 您可以混合使用 % 和position值

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索