CSS background (background)

CSS can add background colors and background images, as well as to carry out the picture settings.

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

Background image (image)

none: No background (default)

url: use absolute or relative address specified background image

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

Background tile (repeat)

repeat: the background image tile in the longitudinal and transverse (default)

no-repeat: no background image tiling

repeat-x: background image tile in the transverse direction

repeat-y: the background image tile vertically

When setting a background image, the default image to spread across the tile elements in the horizontal and vertical directions.

repeat-x: background image tile in the transverse direction

repeat-y: the background image tile vertically

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

Background-position (position)

position is behind the x and y coordinates. Nouns can be used or the exact unit.
If the names and precise orientation of the unit and mixed, the former must be the x-coordinate, y-coordinate later.
Such background-position: 15px top; 15px must then the x coordinate is the y coordinate top.

    <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>

Background attachment

Set or retrieve the contents of the object with the background image is scrolled or fixed.
scroll: the background image with the subject content is rolling
fixed: fixed background image

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

Background shorthand

background: the background color of the background picture address background tile background background scroll position

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

Transparent background (CSS3)

The last parameter is between the alpha transparency ranges from 0 to 1

Note: Background refers translucent translucent background box, inside the box does not receive influence content.

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