CSS背景常用属性

background-color

  • CSS中，颜色值通常以以下方式定义:
    • 十六进制 - 如："#ff0000"
    • RGB - 如："rgb(255,0,0)"
    • 颜色名称 - 如："red"
1
2
3
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

background-image

  • 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
  • 水平或垂直平铺
    1
    2
    3
    4
    body
    {
    background-image:url('gradient2.png');
    }
  • 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
    1
    2
    3
    4
    5
    body
    {
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
    }

background-repeat

  • 属性设置是否及如何重复背景图像。
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
  • 例如：
    1
    2
    3
    4
    5
    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
     /* 图片不平铺 */}

background-attachment

  • 设置背景图像是否固定或者随着页面的其余部分滚动。默认值是scroll.
值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。(其他属性有改变，而加入这个关键字属性保持不变)
inherit 指定 background-attachment 的设置应该从父元素继承。

background-position

  • 设置背景图像的起始位置。
值 描述
left top 如果仅指定一个关键字，其他值将会是”center”
left center 如果仅指定一个关键字，其他值将会是”center”
left bottom 如果仅指定一个关键字，其他值将会是”center”
right top 如果仅指定一个关键字，其他值将会是”center”
right center 如果仅指定一个关键字，其他值将会是”center”
right bottom 如果仅指定一个关键字，其他值将会是”center”
center top 如果仅指定一个关键字，其他值将会是”center”
center center 如果仅指定一个关键字，其他值将会是”center”
center bottom 如果仅指定一个关键字，其他值将会是”center”
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承