CSS基础-背景
CSS背景 background
纯色背景
{background-colcor:gray; padding:20px}
为元素设置背景色，并设置了内边距，使得元素中的文本向外少有延伸。
用rgba设置背景颜色，例如半透明的黑色：rgba(0,0,0,0.5)，前三个参数是红绿蓝，最后一个参数可以实现透明度的设置。
也可以用opacity: 0.x 设置透明度，但是这会将整个元素，包括文字部分一起实现透明。
图片背景
{background-image:url(图片地址);}
一般来说，背景图像应用在body上，不过也可以应用在行内元素、超链接等元素上。
同样的，也可以用padding设置内边距。
背景重复
{background-image:url(图片地址); background-repeat:repeat/repeat-x/repeat-y/no-repeat; }
repeat表示在x和y方向上都平铺
背景定位
可以利用background-position属性改变背景图片的位置
- 利用center、top、bottom、left、right等关键字定义位置。
通常需要这些关键字成对出现，并且只有一对；如果只有一个关键字，那么另一个默认为center。
例如，left等价于left center。
- 还可以使用长度值，100px/5cm等，以左上角为偏移点
比如，background-position：50px 100px；
指的是图像距离左上角向右50px, 向下100px。
- 也可以用百分数
用两个百分数表示，第一个表示垂直方向，第二个表示水平方向。如果只提供一个百分数，默认理解为水平值。
这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。
也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。 未理解
- 4-value语法
例：top 200px right 300px
背景关联
通过background-attachment：fixed 申明图像不随背景滚动（scroll）,而是相对于可视区是固定的。
调整背景图像大小
利用background-size属性调整图像大小。
可以用关键字
- contain 使图像适合在盒子内，保持其高宽比，但是可能存在一定间隙。
- cover 使图像完全覆盖盒子，保持其高宽比，但是可能损失一部分图像。
contain cover
渐变背景
可以用linear-gradient函数创建两种或多种颜色的渐变背景，是一种特别的<image>数据类型。
示例：
/*无方向指示时，默认从上到下渐变*/ background: linear-gradient(#e66465, #9198e5);
/* 渐变轴为45度，从蓝色渐变到红色 */ background-img: linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */
background-img: linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ background-img: linear-gradient(0deg, blue, green 40%, red)
/*水平旋转1/4圈(90°)，蓝色、白色、黄色三色渐变*/ background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); 见右图
多个背景图像
在background-img中，填入多个图像url就可以实现多个背景重叠展现：
background-image:url(image1.jpg),url(image2.jpg);
注意：
- 这里image1在上，image2在下，添加的背景图片按顺序叠放在下。
- 其他background属性的值也可以 以逗号分隔的方式与其他属性中相同位置的值匹配。
- 背景图片与渐变背景叠加可能会产生不错的效果。
给背景图片增加颜色遮罩
例如：把第一张图片变成第二张图片
-----》
方法
.background1{ background: url(./img/img2.png) rgba(0, 0, 0, .5) no-repeat center center; background-blend-mode: multiply; }
不需要position绝对定位，随着当前背景图变化，非常方便。
