CSS背景图

background-color: red;

background-image: url(images/img123.png);

/* 平铺方式 */
/* repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3） */

background-repeat: no-repeat;

/* 只有当平铺方式为no-repeat时有效。 */
/* 位置，参数：水平 垂直 */
/* 方位名词没有先后要求，只写一个时，另外一个默认为center */
background-position: right bottom;

/* 当指定精确值时，第一个参数为x，第二个为y */
background-position: 50px 20px;

/* 可以只指定一个精确值 */
background-position: 50px center;

固定不动：
background-attachment: fixed;
随内容滚动：
background-attachment: scroll;

background: lightgray url(images/img123.png) no-repeat center 100px fixed;

/* 背景半透明 */
background: rgba(100, 100, 200, 0.3);

相当于：
background-color: rgba(100, 100, 200, 0.3);

/* 固定宽、高。可能会导致图片变形。 */
background-size: 200px 20px;

/* 通常只写一个参数，图片尺寸的另一个参数会自动拉伸，不会变形 */
background-size: 200px;

/* 指定缩放比例，不会变形 */
background-size: 50%;

/* 自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。最常用。 */
background-size: cover;

/* 自动调整缩放比例，保证图片始终完整显示在背景区域。会有未铺满的地方，裸露出背景。 */
background-size: contain;

/* 多个背景图片，每组属性用逗号分隔 */
/* 背景颜色必须写在最后一组 */
/* 有重叠的地方，前面的图片会覆盖后面的图片 */
background: url(images/img2.png) no-repeat right bottom, url(images/img3.jpg) no-repeat skyblue;