background-image中的细节

目录：

一、背景
二、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