[CSS]背景设置

 主要涉及：颜色、图片、平铺、位置、固定，这五个方面的设置。

 

背景颜色

background-color: transparent    /* 默认：透明的 */
background-color: #ffffff        /* 十六进制颜色 */ 

 

背景图片

background-image: none;       /* 默认：无图  */
background-image: url();      /* 图片链接    */

开发中常用于logo、装饰性小图片、超大图片、精灵图。

可以同时设置背景颜色和背景图片，背景图片会位于背景颜色之上。

相较于直接使用<img>标签，更容易控制图片位置。

 

背景平铺

background-repeat: repeat;              /*  默认：重复   */
background-repeat: no-repeat;           /*  不重复，即只显示一个 */
background-repeat: repeat-x;            /*  沿x轴方向重复  */
background-repeat: repeat-y;            /*  沿y轴方向重复  */

 

背景位置

/* 使用方位名词 */
background-position: center center   /* 默认 */
background-position: top left
background-position: bottom right

/* 使用精确单位 */
background-position: 20px 50px

/* 混合写法 */
background-position: center 60px
background-position: 80px top

background-position可跟两个参数。

1. 使用方位名词时，无顺序要求。可以填的参数有：center(x和y方向均可)、left(x方向)、right(x方向)、top(y方向)、bottom(y方向)。

    如果只写了一个方位名词，则另一个方向为center。

2. 使用精确单位时，第一个参数表示x方向，第二个参数表示y方向。

　如果只写了一个精确单位，则表示的是x方向，y方向默认为center。

3. 使用混合写法时，第一个参数表示x方向，第二个参数表示y方向。

 

背景固定（附着）

background-attachment: scroll;     /* 默认：滚动 */
background-attachment: fixed;      /*    固定   */

 

背景复合写法

/*  background: 颜色 图片 平铺 滚动 位置;  */
background: pink url(img/female.png) repeat-y scroll right top;

无严格的顺序要求，以上顺序为开发中约定的写法。

颜色 图片 平铺 滚动 位置

 

背景颜色半透明

background: rgba(红 绿 蓝 透明);
 /*   红绿蓝可填0-255  */
 /*   透明可填0-1      */

*CSS3新增特性，IE9以上支持。

 

以下表格摘自黑马程序员网课教程：