CSS背景设置

设置背景颜色

通过background-color来设定

设置背景图片

通过background-image: url('图片路径')设置背景图片，说明如下：

• 可以同时设定背景颜色和背景图片，如果二者同时设定了，那么背景颜色会成为图片的背景色
• 如果背景图片大小小于元素，则背景图片默认在元素中平铺，直至将元素铺满
• 如果背景图片大小大于元素，则会裁减掉图片，图片的一部分将无法显示
• 如果背景图片大小和元素相同，那么会正常显示图片

示例
1、元素大小 = 图片大小，图片和元素大小均是100 * 100

2、元素大小 > 图片大小，元素大小150*150，图片大小100 * 100

3、元素大小 < 图片大小，元素大小50*50，图片大小100 * 100

背景图片的其他设置

设置背景图片的重复方式
重复方式通过background-repeat来设置，可选值如下：

• repeat 默认值，背景会沿着X/Y两个方向重复平铺
• repeat-x 背景会沿着X方向重复平铺
• repeat-y 背景会沿着Y方向重复平铺
• no-repeat 背景不进行重复平铺

设置背景图片的位置
位置通过background-position来设置，设置的方式如下：

• 通过top bottom left right center几个方位词来设定背景图片的位置，可以理解为将元素分成一个九宫格，方位词分别表示九宫格里面的位置。通过方位词设定，必须要写入两个值，如果只写一个值，那么默认第二个值为center。具体位置对于如下：
  
• 通过偏移量来设定背景图的位置，第一个值为X方向，第二个值为Y方向

示例
1、设置图片到右上角

.box1 {
    /* 元素大小设置 */
    width: 300px;
    height: 300px;
    
    /* 背景颜色设置为红色 */
    background-color: red;
	/* 背景图片设置，图片大小为100px * 100px */
    background-image: url('./bk.png');
    /* 背景图片重复方式设定为不重复 */
    background-repeat: no-repeat;
    /* 设定背景图片到右上角 */
    background-position: top right;
}

2、设置图片居中

.box1 {
    /* 元素大小设置 */
    width: 300px;
    height: 300px;
    
    /* 背景颜色设置为红色 */
    background-color: red;
	/* 背景图片设置，图片大小为100px * 100px */
    background-image: url('./bk.png');
    /* 背景图片重复方式设定为不重复 */
    background-repeat: no-repeat;
    /* 设定背景图片居中 */
    background-position: 100px 100px;
}

设置背景图片的范围
位置通过background-clip来设置，设置的方式如下：

• border-box 默认值，背景会出现在边框的下边
• padding-box 背景会出现在内边距和内容区，但是不会出现在边框
• content-box 背景只会出现在内容区

示例

设置背景图片的偏移量计算的原点
位置通过background-origin来设置，设置的方式如下：

• padding-box 默认值，background-position从内边距处开始计算
• content-box background-position从内容区处开始计算
• border-box background-position从边框处开始计算

设置背景图片的大小
位置通过background-size来设置，设置的方式如下：

• cover 图片的比例不变，将元素铺满
• contain 图片的比例不变，将图片在元素中完全展示
• 直接写值，第一个值表示宽度，第二个值表示高度，如果只写一个值，那么默认第二个值为auto。设置为auto的话，会根据宽度自动等比例调整

背景图片是否跟随元素移动
位置通过background-attachment来设置，设置的方式如下：

• scroll 默认值，背景图片会跟随元素移动
• fixed 背景会固定在页面中，不会随元素移动

背景渐变

背景颜色渐变是通过background-image来设置的。具体方式如下：

线性渐变
颜色顺着一条线发生变化，通过background-image: linear-gradient(xx)进行设置，示例是width: 200px; height: 200px;的div。

• background-image: linear-gradient(red, yellow)，红色在开头，黄色在结尾
  
• 指定渐变的方向to left / to right / to top / to bottom，默认是to bottom。background-image: linear-gradient(to left, red, yellow);效果如下
  
• 指定渐变的度数deg，默认是180deg，background-image: linear-gradient(0deg, red, yellow);效果如下：
  
• 指定渐变的范围，background-image: linear-gradient(red 30px, yellow 180px);红色从30像素开始渐变，黄色从180像素开始，未到开始位置的如(0px, 30px)和(180px, 200px)，会用纯色填充。
  
• 指定多个渐变颜色，多个颜色默认状况下平均分布。background-image: linear-gradient(red, yellow, blue);中间是黄色，上边是红色，底部是蓝色。
  
• 线性渐变平铺，通过background-image: repeating-linear-gradient()来设置。background-image: repeating-linear-gradient(red, yellow 50px);，红色的起始点是0px，黄色的起始点是50px，所以渐变的范围是0-50px，而元素的大小是200px，所以50-200px这段就是空白，平铺的效果就是使用0-50px这段的渐变将空白区域都填充满。
  
  径向渐变
  通过background-image: radial-gradient(xx)进行设置，示例是width: 200px; height: 200px;的div和width: 200px; height: 200px的div。
• background-image: radial-gradient(red, yellow);红色在中间，黄色在四周
  
• 指定渐变的形状。默认情况下，渐变的形状是根据元素的形状来决定的，元素是正方形渐变就是圆形，元素是长方形渐变就是椭圆。也可以指定渐变的形状circle: 圆形 ellipse: 椭圆，background-image: radial-gradient(circle, red, yellow);设定渐变为圆形。
  
  
• 指定渐变的大小，background-image: radial-gradient(100px 100px, red , yellow);表示渐变的大小是100px * 100px。
  
• 调整渐变的位置background-image: radial-gradient(50px 50px at 20px 20px, red , yellow);，at后面填写的是位置信息，可以通过位置词center bottom top right left来指定，跟background-position使用方法一致。