background

.backgroud  {
    background:  url( ) no-repeat center/cover orange<颜色>;
    background-color: ;
    background-image: ;
    background-repeat: ;
    background-position: ;

    background-size: contain || cover; /* 等比例缩小 */
    background-size: ; /* cover必须写在background-position后面 */
    background-clip: ;
    background-origin: ;
}

 

01. background: url( ) no-repeat center/cover orange<颜色>；

.backrgound  {
    background:  url( ) no-repeat center/cover orange<颜色>;
    备注：cover必须写在background-position后面
}

 

02. background-size: 设置背景图的展示方式。

.backrgound  {
    background-size: contain; /* 等比例缩小 */
    background-size: cover; /* 等比例方法 */
    background-size: 100% auto; /* 百分比 */
}

 

03. background-clip: 从内容的边缘开始渲染；

.backrgound  {
    background-clip: padding-box; /* 背景被裁剪到内边距框（默认） */
    background-clip: content-box; /* 背景被裁剪到内容框 */
    background-clip: border-box; /* 背景被裁剪到边框盒 */
}

 

04. background-origin: 规定background-position属性相对于什么位置来定位；

.backrgound  {
    background-position: padding-box; /* 背景图片相对于内边距框来定位（默认） */
    background-position: border-box; /* 背景图片相对于边框盒来定位 */
    background-position: content-box; /* 背景图片相对于内容框来定位 */
}

 

05. linear-gradient: 线性渐变；

.backrgound {
    linear-gradient: (direction, 颜色<%百分比>); /* 线性渐变 */
    /* direction：    to right/left/top/bottom; */
            
    
    repeating-linear-gradient: (direction，颜色<%百分比>); /* 重复性线性渐变; 复制铺满尺寸 */
    
    radial-gradient: (direction，颜色<%百分比>); /* 径向渐变 */
}

 

06. -webkit-box-reflect: 方位 距离；倒影

.backrgound {
    -webkit-box-reflect: 方位  距离
        方位： above / below/ left /right  
        距离：20px/30px
}