CSS背景是最常用的CSS属性之一。但是，并非所有开发人员都知道使用多个上下文。这次是关于使用多个背景场景。在本文中，将详细介绍background-image`属性，并配图解释背景的各种使用方式及其实际好处。如果你还知道CSS背景属性，可以先去MDN查一下相关知识。简介CSS背景属性是以下属性的简写：背景剪辑、背景颜色、背景图像、背景原点、背景位置、背景重复、背景大小和背景附件。对于本文，我们将重点关注背景图像、背景位置和背景大小。你准备好了吗？让我们开始吧！考虑以下示例：.element{background:url(cool.jpg)topleft/50px50pxno-repeat;}背景图像位于元素的左上角，大小为50pxx50px。理解并记住位置和大小的顺序很重要。在上图中，background-position后面是background-size。它们的顺序不能颠倒，否则无效，如下图：.element{/*Warning:InvalidCSS*/background:url(cool.jpg)50px50px/topleftno-repeat;}BackgroundPosition元素的定位是相对于背景-origin属性设置的方向图层。我喜欢background-position的灵活性，它有多种定位元素的方式：关键字值（top,right,bottom,left,center）百分比值，如：50%长度值，如：20px，2.5remedgeoffset偏移值，如：top20pxleft10px坐标系从左上角开始，默认值为0%0%。值得一提的是，topleft与lefttop具有相同的值。浏览器足够智能，可以确定其中哪些用于x轴，哪些用于y轴。.element{background:url(cool.jpg)topleft/50px50pxno-repeat;/*上同下同*/background:url(cool.jpg)lefttop/50px50pxno-repeat;}BackgroundSize为background-size属性，第一个是宽度，第二个是高度。您可以使用一个值，而不是使用两个值，它表示相同的宽度和高度。现在我了解了CSS背景的工作原理，让我们探讨如何使用多个背景。多个背景background属性可以有一层或多层，用逗号分隔。如果多个背景大小相同，一个将覆盖另一个。.element{background:url(cool.jpg)topleft/50px50pxno-repeat,url(cool.jpg)center/50px50pxno-repeat;}在上图中，我们有两个背景层。每个位置都不一样。这是多上下文的基本用法，让我们研究一个更高级的示例。放置顺序当放置多个背景时，其中一个占据了其父级的全部宽度和高度，放置顺序可能有点乱，考虑以下示例：.hero{min-height:350px;background:url('table.jpg')center/coverno-repeat,url('konafa.svg')center/50pxno-repeat;}我们有一张盘子和一张桌子的照片，你认为哪个会在上面？答案是表。在CSS中，第一个背景可以放在第二个背景之上，第二个背景可以放在第三个背景之上，依此类推。通过替换背景的顺序，得到了预期的结果。用例和示例覆盖通常，我们可能需要在部分顶部放置一个覆盖，以使文本更易于阅读。这很容易通过堆叠两个背景来完成。.hero{background:linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)),url("landscape.jpg")center/cover;}好吧，我们上色可以使用与上述相同的方法应用于元素。考虑以下内容：.hero{background:linear-gradient(135deg,rgba(177,234,77,0.25),rgba(69,149,34,0.25),url("landscape.jpg")center/cover;}使用CSS绘图CSS渐变绘制的可能性是无限的，你可以使用linear-gradient或者radial-gradient等，接下来我们看看如何使用它的两个兄弟来绘制笔记本电脑，拆解笔记本电脑看看我们需要用什么渐变解决的时候一个notebook，比较容易想到怎么用多个css背景来实现，接下来就是画图了，首先是把每个渐变定义为一个css变量和它的大小，我喜欢用css变量，因为这样可以减少代码的复杂度,使代码更简洁易读。:root{--case:linear-gradient(#222,#222);--case-size:152px103px;--display:linear-gradient(#fff,#fff);--显示尺寸:137px87px;--反射:线性渐变(205deg,#fff,rgba(255,255,255,0));--反射尺寸:78px78px;--正文:线性渐变(#888,#888);--body-size:182px9px;--circle:radial-gradient(9px9pxat5px5.5px,#88850%,transparent50%);--circle-size:10px10px;}现在我们定义渐变及其大小，下一步就是放置它们。考虑下图以获得更好的视觉解释。显示图片如前所述，首先要定义需要置顶的元素。在我们的例子中，显示图像应该是第一个渐变。显示屏LCD显示屏以x轴为中心，距y轴6px。显示器外壳位于显示器下方，以x轴为中心，距y轴0像素。正文这是图中最有趣的部分。首先，身体是一个A矩形，每边（左和右）有两个圆圈。最终结果:root{--case:linear-gradient(#222,#222);--case-size:152px103px;--case-pos:center0;--display:linear-gradient(#fff,#fff);--显示尺寸：137px87px;--显示位置：center6px;--反射：线性渐变（205deg，#fff，rgba（255,255,255,0））;--反射尺寸：78px78px;--反射-pos:topright;--body:linear-gradient(#888,#888);--body-size:182px9px;--body-pos:centerbottom;--circle:radial-gradient(9px9pxat5px5.5px,#88850%,transparent50%);--circle-size:10px10px;--circle-left-pos:leftbottom;--circle-right-pos:rightbottom;}.cool{width:190px;height:112px;background-image:var(--reflection),var(--display),var(--case),var(--circle),var(--circle),var(--body);background-size:var(--reflection-size),var(--display-size),var(--case-size),var(--circle-size),var(--circle-size),var(--body-size);背景-位置：var(--reflection-pos),var(--display-pos),var(--case-pos),var(--circle-left-pos),var(--circle-right-pos),var(--body-pos);background-repeat:no-repeat;/*outline:solid1px;*/}Mixingmultiplebackgrounds混合多个背景可能会很令人兴奋考虑一下你在CSS中有一个背景图像，你想把它变成黑白图像。.hero{background:linear-gradient(#000,#000),url("landscape.jpg")center/cover;background-blend-mode:color;}人才的【三通】是小智一直分享的最大动机。本博客如有错误或建议，欢迎留言。最后谢谢大家的观看。作者：Ahmadshaded译者：FrontendXiaozhi来源：sitepoint原文：https://css-tricks.com/css-basics-using-multiple-backgrounds/关注下方二维码。转载本文请联系大千世界公众号。
