background 背景

background-size:contain(缩放在背景内部)/cover(覆盖全背景)/长度单位
background-color:背景颜色;
background-image:url();
background-position:0 0;
background-repeat:no-repeat/repeat-x/repeat-y(背景Y轴重复)
background-attachment:scorll/fixed(背景固定在视口);
background-clip:content-box/padding-box/border-box(确定从什么盒子裁剪背景);
background-origin:content-box/padding-box/border-box(确定从什么盒子显示背景);

1、background-size

contain cover

contain：图片大到刚好被包裹，不更改图片比例，可能留有空白区域
cover：图片被拉伸到刚好覆盖整个背景区域，为了适应元素的宽高会更改图片比例

1.1、object-fit属性 指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框

比如当替换元素img设置了宽高
object-fit:cover;    //不改变替换内容的宽高比进行缩放，并填充满整个内容框，不会留空
object-fit:contain;    //不改变替换内容宽高比进行缩放，按最宽或最高匹配内容框，若图片小于内容框，内容框会存在空白

object-fit:fill;    //填充满整个内容框，宽高比不匹配时会被拉伸
object-fit:none;    //被替换的内容尺寸不会被改变
object-fit:scale-down;    //内容尺寸像是指定了none或contain，取最小的那个对象尺寸

object-fit:cover / contain

2、background-clip 和 background-origin 的区别

共同拥有的值：content-box / padding-box / border-box

此时为content-box

background-clip：默认值 border-box，根据值进行背景颜色或图片的裁剪。如上图所示，为content-box时外部区域没有背景颜色或图片
background-origin：默认值 padding-box，规定背景图片的显示区域从哪个原点开始，对颜色无效

2.1、独有值 - background-clip:text : 裁剪到只有文字区域才能显示背景图片

注意：

1. 目前只有谷歌浏览器支持该属性

2. 需要文字颜色为透明才能看到背景图片，若文字有颜色则会覆盖掉背景图片

   
   
   

   background-clip:text

3、background-image

background-image:url(),url(),url();    /*z轴方向叠加*/

CSS渐变

一个网站

线性渐变
background-image:linear-gradient(top right,red,blue)
background-image:linear-gradient(45deg,red,blue,black)
background-image:linear-gradient(90deg,red 50%,blue 75%,black 90%)

平铺的线性渐变
background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px);
//浏览器从左下角开始绘制渐变，前20像素是绿色，此后直至30像素的位置过渡到紫色，然后直至40像素的位置再过渡到绿色
background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 20px, #6666CC 30px, #66CC99 30px, #66CC99 40px);
//这样设置色标的位置，可以控制不同颜色在过渡中的强度。使得各个颜色过渡之间的边界变得清晰，形成条纹效果。

径向渐变：沿着圆周或者椭圆周向外扩散
background-image: radial-gradient(#99CCCC, #7171B7);    //椭圆
background-image: radial-gradient(circle,#99CCCC, #7171B7);    //circle，定义圆形渐变
background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7);    //定义圆心位置

closest-side：告诉浏览器从中心点向外扩展渐变，到离中心点最近的一边结束。
closest-corner：以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-side：以离渐变中心点最远的那一边计算圆的半径。
farthest-corner：以离渐变中心点最远的顶角计算圆的半径。