第二课--背景

a.background-image添加背景图片
background-image: url("border.png");/*背景图片*/
background-position: right bottom, left top;/*图片位置*/
background-repeat: no-repeat, repeat;/*是否平铺*/

b.background-size背景图像的大小

c.background-origin背景图像的位置区域

d.background-clip背景剪裁属性是从指定位置开始绘制

    
    背景


    body {
        background-image: url("border.png"); /*背景图片*/
        background-position: left; /*right bottom, left top;图片位置*/
        background-repeat: no-repeat; /*repeat;是否平铺*/
        background-size: 20px 20px; /*背景图片的大小*/
    }

    div {
        border: 1px solid black;
        padding: 35px;
        background-image: url('border.png');
        background-repeat: no-repeat;
        background-position: left;
    }

    #div1 {
        background-origin: border-box;
    }

    #div2 {
        background-origin: content-box;
    }



背景图像边界框的相对位置：

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.


背景图像的相对位置的内容框：

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.