CSS背景(background)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景图片(image)

none : 　无背景图（默认的）

url : 　使用绝对或相对地址指定背景图像

            div {
                width: 300px;
            	height: 300px;
                background-image: url(images/1.png);
            }

背景平铺（repeat）

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

            div {
            	width: 300px;
            	height: 300px;
                background-image: url(images/1.png);
                background-repeat: no-repeat;
            }

背景位置(position)

position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。
比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

    <style>
        /* 图片定位用于在一个盒子中定位图片的显示位置，其属性有：
        top | center | bottom | left | center | right 
        或者用像素定位 */
        div {
            width: 300px;
            height: 300px;
            background-image: url(image/3.jpg);
            background-repeat: no-repeat;
            }
        .pic1 {
            background-position: center center;
        }
        .pic2 {
            background-position: 12px 50px;
        }
        .pic3 {
            background-position: top right;
        }
    </style>

背景附着

设置或检索背景图像是随对象内容滚动还是固定的。
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

            body {
                /* scroll : 　背景图像是随对象内容滚动
                fixed : 　背景图像固定  */
                background-attachment: fixed;
                background: red url(image/3.jpg) no-repeat silver left top;
            }

背景简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

            body {
                /* scroll : 　背景图像是随对象内容滚动
                fixed : 　背景图像固定  */
                background-attachment: fixed;
                背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
                background: red url(image/3.jpg) no-repeat silver left top;
            }

背景透明(CSS3)

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

background: rgba(0,0,0,0.3);