css背景图片的实现

背景颜色

background-color:

背景图片

background-image

background-repeat

定义背景图片的显示方式

默认值：水平垂直都平铺，背景颜色和背景图片能同时存在

repeat，图片重复

repeat-x，图片横向重复

repeat-y，图片纵向重复

no-repeat，图片不重复

加多张背景图片

注意：图片显示按先后顺序显示，这里引用的第一张图片是png，支持透明显示

background-image: url(../img/peak-result.png),url(../img/pj.jpeg);

显示效果：

背景图片的位置

background-position

定义背景图片的位置 默认值 background-position：0 0；

直接使用两个定位单词，例:background-position: right top;

使用x、y坐标，例:background-position: 20px 30px;

可以用四种方式来定义图片位置：

background-position: 20px 20px;

background-position: left center;

background-position: center center;

background-position: 50% 50%;

background-size 定义背景图片的大小

background-size: length  |  percentage  |  cover  |  contain;

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）

contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白)

可以用四种方式来定义图片尺寸：

background-size: 200px;

background-size: 50%;

background-size: contain;

background-size: cover;

background-origin 

定义背景图片的渲染位置

背景图片可以放置于padding-box 、 content-box 或 border-box 区域。

background-attachment

定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment：fixed（固定）| scroll（默认）

简写：

这里需要注意的是，位置在前，大小在后，用斜杠隔开。