css - background

一、背景

1. 背景颜色

background-color: 颜色值;

值	描述
transparent	默认值，透明的
#fff	十六进制颜色值
rgba	可以设置透明度

背景半透明(CSS3)

background: rgba(0, 0, 0, 0.3);

/* 0.3 可以简写为 .3 */
background: rgba(0, 0, 0, .3);

• 最后一个参数是 alpha 透明度 取值范围 0 ~ 1 之间
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

2. 背景图片

语法：background-image : none | url (url) ;
例如: background-image: url(images/1.png);

3. 背景平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向平铺
repeat-y	背景图像在纵向平铺

4. 背景位置

默认从 左上角 开始

background-position : length|position || length|position

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

注意

• 必须先指定 background-image 属性
• position 后面是 x 坐标和 y 坐标。可以使用 方位名词 或者 精确单位。
• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个值，另一个值默认 垂直居中（center、50%）。

5. 背景尺寸

background-size: length|percentage(%)|cover|contain

值	说明
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个值默认为 auto
percentage(%)	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。。如果只给出一个值，第二个值默认为 auto
cover	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
contain	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

6. 背景简写

• background：属性的值的书写顺序官方没有强制的标准。为了可读性，建议如下写：
• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

/* 有背景图片背景颜色可以不用写 */
background: transparent url(image.jpg) repeat-y  scroll center top;

7. 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-size	背景尺寸	length percentage(%) cover contain
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

8. 实现小程序中的图片模式

scaleToFill

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

object-fit: fill; 也可以实现

background: url('./image/bg.jpeg') no-repeat left top / 100% 100%;

aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

object-fit: contain; 也可以实现

background: url('./image/bg.jpeg') no-repeat center / contain;

aspectFill

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

object-fit: cover; 也可以实现

background: url('./image/bg.jpeg') no-repeat center / cover;

center

裁剪模式，不缩放图片，只显示图片的中间区域

object-fit: none; 也可以实现

background: url('./image/bg.jpeg') no-repeat center

二、渐变

以显示两种或多种指定颜色之间的平滑过渡

1. 线性渐变

从 一个方向 到 另一个方向 的渐变

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction

值	说明
to bottom	默认值，从上到下
to top	从下到上
to right	从左到右
to left	从右到左
angle	用角度值指定渐变的方向，例如：45deg

color-stop
可以使用关键字 red、rgba（透明也可以设置）或十六进制设置颜色

示例

/* 从上到下，默认就是这个方向 */
.box-1 {
  background: linear-gradient(to bottom, red, blue, yellow);
}

/* 从左到右 */
.box-2 {
  background: linear-gradient(to right, red, blue, yellow);
}

/* 从左下角到右上角的对角线渐变（角度是以底部为起点，逆时针，45度就是左下角） */
.box-3 {
  background: linear-gradient(45deg, red, blue, yellow);
}

/* 从左下角到右上角的对角线渐变 */
.box-4 {
  background: linear-gradient(to right top, red, blue, yellow);
}

/* 从下到上渐变，先从红色开始 -> 再到蓝色（40%：从容器高度的40%是蓝色渐变的开始） -> 最后以黄色结束 */
.box-5 {
  background: linear-gradient(0deg, red, blue 40%, yellow);
}

渐变角度

2. 径向渐变

径向渐变由其中心定义。从 一个点 向四周的渐变

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);