CSS3 色彩与背景设置

色彩

表示颜色的三种方法

1.字符串表示法，只不过这个字符串
2.rgba表示法，分别表示红，绿，蓝三种颜色所占的比重0-255，和透明度（0-1，0表示完全透明，1表示完全不透明）。用rbga（r,g,b,a）元组表示
3.六位十六进制表示法

    <style>
        h1
        {
            background-color:red
        }
        h2
        {
            background-color:rgba(255,0,0,1)
        }
        h3
        {
            background-color:#FF0000;
        }
        h4
        {
            background-color:#F00;
        }
    </style>

十六进制表示衍生出来的的三位十六进制表示，如果12位，34位，56位上的十六进制数一样，就可以简写了，例如上面可以简写为#f00。
还有其他许多表示方法

背景设置

背景颜色background属性

背景图像

1.图像url，background-image属性

background-image: url('1.PNG');

2.图像位置，backgroud-position属性。默认从左上角开始
值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承

3.图像是否重复,background-repeat属性，默认重复
值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承
4。说明图片随着滚轮滚动时的位置，background-attachment 属性。默认scroll
值 说明
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承

    <style>
        body
        {
            background-image: url('1.PNG');
            background-position: 50px 100px;
            background-attachment: fixed;
            background-repeat:no-repeat;
        }
    </style>

效果

背景设置简写

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.

body {background:#ffffff url('img_tree.png') no-repeat right top;}

表示