目录：
一、背景 二、background-image 1.多背景图片 2.按钮背景 3.linear-gradient
字数：大约800字
一、背景
之前我在一个项目中看见这样的面包屑点了之后展示的菜单按钮，当时还觉得挺新奇的，去看了一下，就只是一个普通div而已，只是通过这张背景即可，刚好细细看一下background-image这个样式。
二、background-image
mdn: background-image 属性用于为一个元素设置一个或者多个背景图像。
从文档我们知道，它可以设置一个或者多个，平时我们都是用的一个，单其实他是允许设置多个的。
1.多背景图片
这里是使用两个图片背景实现效果，对比来看，你应该能很快得到两个的区别，两张背景图片出现了层级覆盖。为什么会出现这样呢？
研究发现，在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。“z 方向堆叠”这个你应该很熟悉，因为页面的绘制本身就是这样来的，这里的背景也不除外。
<divclass="painting"></div>
<divclass="painting1"></div>
.painting{
width: 200px;
height: 200px;
background-image: url('./img/lizard.png'), url('./img/star.png');
background-position: 40px40px, -200px -400px;
}
.painting1{
width: 200px;
height: 200px;
background-image: url('./img/star.png'), url('./img/lizard.png');
background-position: -200px -400px,40px40px;
}
通过改变背景图片的前后顺序，就达到上面的效果。
2.按钮背景
即然背景可以多个，那我就来三个，把按钮的背景分为左、中、右 三个图片。
因为需要控制到每个图片，所以在设置position、size、repeat时候，也是需要多个，然后逗号分隔。
background-image: a.png, b.png, c.png;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: xy, xy, xy%;
background-size: xpxypx, xpxypx, xpxypx;
button{
width: 600px;
height: 200px;
max-width: 600px;
background-image: url('./img/冰淇淋.png'), url('./img/啤酒.png'), url('./img/奶茶.png');
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, center, right bottom !important;
background-size: 200px100%, left top, 200px100%!important;
background-color: #fff;
border: 10px solid orange;
border-radius: 40px;
font-size: 60px;
font-weight: 700;
color: red;
}
这样类似最开始那个按钮了。要想一个很好的背景按钮，只是需要UI设计好，三个图片，拼起来即可。
3.linear-gradient
除了我们知道的img图片之外，在css中还有linear-gradient()函数，这个函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型，是一种特别的image数据类型。
此函数细节就不说了，因为background-image需要的背景是图片，刚好linear-gradient（）函数是一种特别的image数据类型。所以它也支持这里的背景。
button{
width: 600px;
height: 200px;
max-width: 600px;
+ background-image: url('./img/冰淇淋.png'), linear-gradient(to right,rgba(34, 201, 248, 0.953), rgba(27, 246, 210, 0.5)), url('./img/奶茶.png');
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, center, right bottom !important;
background-size: 200px100%, left top, 200px100%!important;
background-color: #fff;
border: 10px solid orange;
border-radius: 40px;
font-size: 60px;
font-weight: 700;
color: red;
}
得到效果图
相关资料：
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image#%E5%8F%82%E8%A7%81
