background-image

background-image: linear-gradient(red, green)
首先，是可以直接放上一个渐变的。

image.png

其次： CSS3提供了多 url属性，可以在一个容器里面展示多张图片。

.wrapper{
           width: 600px;
           height: 400px;
           border: 1px solid #fff;
           position: absolute;
           left: calc(50% - 300px);
           top: calc(50% - 200px);
           background-image: url('./timg1.jpeg'), url('./timg.jpeg');
           background-repeat: no-repeat;
           background-size: 300px 400px, 300px 400px;
           background-position: 0 0, 300px 0;
       }

image.png

要显示两张不同的图片一定要设置 no-repeat。
这个属性真正的用途可能在于：当某个区域需要展示一张图片的时候，这张图片非常高清， 10+Mb呢，然后第一个 url 指向的就是这张高清图，第二个指向的是一张很小可能只有几K大小的图片作为占位，告诉用户因为网络原因还没加载出来。一旦这个图片加载过来了，会自动显示第一张图片。所以一般也不需要设置 repeat, size, position这些属性

background-origin: 定义图片开始渲染的位置,border-box, padding-box, content-box. 例如border-box, 就会从border处（包括border）开始渲染。如果图片超出容器大小，还会渲染出去，超出容器的大小。

background-position: 在background-origin的基础上，进行定位。

background-clip: 定义图片结束渲染的位置,border-box, padding-box, content-box， text. 将超出的部分剪掉。很好理解，说说text

.wrapper{
           font-size: 80px;
           font-weight: bold;
           background-image: url('./timg1.jpeg');
           -webkit-background-clip: text;
           background-clip: text;
           -webkit-text-fill-color: transparent;
           transition:  background-position .5s;
       }
.wrapper:hover{
          background-position: center center;
}

别忘了在wrapper里面写几个字

image.png

就是这么个效果。这个效果貌似只有 webkit 支持。
background-repeat: repeat, no-repeat, repeat-x, repeat-y, space, round
有这么些个可选方式。
假设容器 200 * 200, 图片 50 * 50
space: 首先会重复，如果增加宽度，参考 flex 布局的 space-between的样子.

.wrapper{
           margin: 200px auto;
           width: 200px;
           height: 200px;
           background-image: url('./timg.jpeg');
           background-size: 50px 50px;
           background-repeat: space;
       }

image.png

当增加的高/宽度足够添加一张 50 * 50进来的时候，图片见的距离会变为 0，添加一张新的图片进来。

round: 会拉伸.
当距离不够添加大半个50 * 50 进来的时候，会把所有的图片稍微拉伸，不留空隙。当足够大半个50 * 50添加进来的时候，会把所有的图片稍微压缩，添加一张新的进来，同样不留空隙。

round 和 space 可以同时写，即横向或者纵向。background-repeat: round space 即横向round，纵向space

background-attchment: scroll, fixed, local
scroll: 相对于容器进行定位，容器的位置不发生改变，无论里面怎么滚动，都不会改变位置。类似于fixed定位。背景图片的位置相对于容器顶部的位置永远不改变。
local: 相对于容器内的内容进行定位，如果内部发生滚动，就随着内容一起滚动。是CSS3的属性。
fixed: 相对于真正的视口进行定位，无论滚动条怎么动，都不改变位置。但是一旦包裹它的容器离开可视区域，它也就不再可见。

background-size: cover, contain, ...其他尺寸
cover: 在不改变图片状态的前提下（拉伸，压缩），首先是一条边对齐，然后另一条边等比缩放，铺满容器。有些边缘部分可能不会显示
contain: 图片一定会被全部显示，但是可能会有白边

linear-gradient

创建线性渐变图像。
background-image: linear-gradient(to top, #f0f, #ff0)

image.png

to top => 0deg
to top right => 45deg
...
颜色后面跟一个值，可以是百分比，可以是像素。

radial-gradient

创建径向渐变图像。

还有repeat-linear-gradient 和 repeat-radial-gradient 以后空了再细细研究吧。有些复杂，且用得少，但是用好了还是很绚丽的。

CSS 之 background

background-image

linear-gradient

radial-gradient