背景，渐变

渐变

渐变分为线性渐变和径向渐变。

线性渐变 linear-gradient

渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。 使用渐变色做背景已经很常见了：
语法：
background:linear-gradient(方向或角度，第一个颜色，第二个颜色，第三个颜色…);
方向或角度：
（1）默认从上到下,无需输入。

div{
width:100px;height:100px;background: linear-gradient(green,yellow);
}

如果需要从下到上渐变可以使用to top

div{
width:100px;height:100px;background:linear-gradient(to top,#fff,#000);
}

（2）从左到右,使用to right

.foo {
background: linear-gradient(to right,green,yellow);
}

从右到左，使用to left

.foo {
  background: linear-gradient(to left,green,yellow);
}

（3）对角
从左上角到右下角，可以使用to bottom right

.foo {
   background: linear-gradient(to bottom right,green,yellow);
}

从右下角到左上角，可以使用to top left

.foo {
   background: linear-gradient(to top left,green,yellow);
}

从右上角到左下角，使用to bottom left

.foo {
    background: linear-gradient(to bottom left,green,yellow);
}

从左下角到右上角，可以使用to top right

.foo {
     background: linear-gradient(to top right,green,yellow);
}

可以给定数值设置渐变角度，如0deg,45deg,-90deg等等。
如0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。
实例：

.foo {
  background: linear-gradient(20deg,green,yellow);
}

色标，color-stop
由一个color值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的length）。
未设置位置时默认情况下颜色均匀分布。
有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。这时候就可以使用百分比等了。
实例，我想让这个绿色在80%的时候结束。

.foo {
  background: linear-gradient(to right,green 80%,yellow);
}

实例2,使yellow从10%的位置开始渐变。

.foo {
   background: linear-gradient(to right,green,yellow 10%,orange);
}

径向渐变 radial-gradient

语法：
.foo {
background-image: radial-gradient(渐变的形状以及所要开始渐变的位置, 开始的第一个颜色，第二个颜色, …,结束颜色);
}
形状包括如下2个参数：
ellipse椭圆形(默认)
circle圆形

实例：

.foo {
 width: 200px; height: 100px;
   background-image: radial-gradient(red,green,yellow);
}

实例2，按正圆渐变：

.foo {
 width: 200px; height: 100px;
 background-image: radial-gradient(circle,red,green,yellow);
}

设置渐变的大小：
（1）farthest-corner(默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角。
farthest-side ：与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
实例，设置一个椭圆，渐变中心点在x轴30px,y轴20px：

.foo {
 width: 200px; height: 100px;
  background-image: radial-gradient(ellipse farthest-corner at 30px 20px,red,green,yellow);
}

（2）closest-side ：渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角

.foo {
  background-image: radial-gradient(ellipse closest-side at 30px 20px,red,green,yellow);
}

position
position与background-position或者transform-origin类似。如缺省，默认为中心点center。

color
与linear-gradient相似， color + 一个百分比值或者length;

重复渐变

1.渐变重复 repeating-linear-gradient

语法：
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …);
实例：

div{
 width: 200px; height: 100px;
background-image: repeating-linear-gradient(90deg,red,green 20%);
}

如下效果：

.div1{
  width: 200px; height: 100px;
  background-image: repeating-linear-gradient(90deg, orange, orange 25px, #FFF 25px, #FFF 50px);
}
.div2{
background-image: repeating-linear-gradient(45deg, red, red 25px, #FFF 25px, #FFF 50px);
}

2.径向渐变重复 repeating-radial-gradient

如下例子，可以通过使用background叠加，实现如下效果。
代码如下：

div{
.mydiv {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: repeating-radial-gradient(orange,orange 3px,yellow 4px,red 5px);
}
}

如下，制作一个动态变化的背景，结合animation实现。

.dynamics {
  width: 300px;
  height: 100px;
  background: linear-gradient(
    90deg,
    orange,
    red,
    pink,
    yellow,
    green,
    black,
    orange
  );
  background-size: 800% 100%;
  animation: dynamics 5s ease infinite;
}
@keyframes dynamics {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 50% 0%;
  }

  100% {
    background-position: 100% 0%;
  }
}

更多详细可以参考
https://www.zhangxinxu.com/wordpress/2017/11/css3-radial-gradient-syntax-example/

背景

在一个声明中设置所有背景属性：

body{
background:#fff url(aa.jpg) no-repeat fixed top;
}

background定义和用法，它包括如下属性

background-color

设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

transparent 值说明
尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

background-color包括的值如下：
（1）background-color:red;使用颜色名称
（2）background-color:#ff5200;使用十六进制
（3）background-color:rgba(255,255,255,0.5);使用rgb
（4）background-color:transparent;默认为transparent.

background-position

设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。提示：您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

值包括两个参数，第一个参数表示背景在垂直轴的位置(top,center,bottom)，第二个参数表示在水平轴上的位置(left,center,right)，如果你只设置了一个参数，第二个参数默认将是center。
值还可以使用百分比设置，一个值是水平位置，第二个值是垂直位置。如：左上角是0% 0%，右下角是100% 100%，如果您仅设置了一个值，则另一个是50%。
实例：

div{
background-position:top center;
background-position:20% 30%;
}

background-repeat

设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。
值如下：
repeat 默认，背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。
值包括：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。

background-image

为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
值如下:
background-image:url(aa.jpg);设置一张背景图
background-image:none;不显示背景图像。

background-size

设置背景图片的尺寸。
它的值可以设置如下：
（1）使用固定值表示，将有两个值，第一个值表示宽度，第二个值表示高度，如果只设置了第一个值，则第二个值会默认会被设置为auto。

div{
background-size:100px 200px;
/*设置背景图片的大小为宽100px高200px*/
}

（2）设置百分比，以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度。同理，如果第二个值未设置默认是auto;

div{
background-size:50% 20%;
}

（3）cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

div{
background-size:cover;
}

（4）contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

div{
background-size:contain;
}

background-origin

规定背景图片的定位区域。规定 background-position 属性相对于什么位置来定位。注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
它的值包括如下：
（1）padding-box背景图像相对于内边距框来定位。
（2）border-box 背景图像相对于边框盒来定位。
（3）content-box背景图像相对于内容框来定位。
padding-box效果如下：

div{
  border: 20px solid rgba(0,0,0,0.3);
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/icon/100.png!ora");
  background-repeat: no-repeat;
  background-origin: border-box;
}

border-box效果如下：

div{
  border: 20px solid rgba(0,0,0,0.3);
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/icon/100.png!ora");
  background-repeat: no-repeat;
  background-origin: border-box;
}

content-box效果如下：

div{
  border: 20px solid rgba(0,0,0,0.3);
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/icon/100.png!ora");
  background-repeat: no-repeat;
  background-origin: content-box;
}

background-clip

规定背景的绘制区域,
值如下：
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

在一个背景中同时设置多个背景图片

div{
  width: 500px;
  height: 300px;
  border: 1px solid #ff5200;
  background: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/test/t1.png!ora")
      0 0 no-repeat,
    url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/test/t2.png!ora") 200px
      100px no-repeat;
}

效果如下：