背景图及渐变

背景图片

如果我想将图片向右又想有距离怎么办?

background:url("../assets/person-function-right.png")  right 1.6rem center no-repeat;

//多背景图片写法
.person-score{
   background: url("../assets/score.png")  1.6rem center no-repeat,
   url("../assets/person-function-right.png")  right 1.6rem center no-repeat;
}
.person-function li{
  background-size: 3.5rem,1rem;
}

其中,背景尺寸上,我们可以发现,使用逗号后我们可以指定两张图片的大小,如果你想指定两张图片的的固定宽高的话,可以写成:

.person-function li{
  background-size: 3.5rem 2rem,1rem 1rem;
}

渐变

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面这种CSS语法我们经常见到，可能有人看不懂具体的意思，其实上面的些符号含义与正则表达式有很多一致之处：
[]在正则中表示一个字符类，这里，你可以理解为一个小单元。
|表示候选。也就是“或者”的意思，要么前面的，要么就后面的。
?为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。例如：

background:linear-gradient(red, yellow);

就是从上往下的红黄条纹效果

+也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。
<>中的是关键字，主要是让开发人员知道这里应该放些什么内容。

水平渐变

{background-image:linear-gradient(left, red 100px, yellow 200px);}

image.png

左上角渐变

那从(100px, 100px)到(200px, 200px)应该就是从左上角开始，写法如下：

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

image.png

当然,还可以使用角度来写:

background-image:linear-gradient(-45deg, red, yellow)