作者：AhmadshadedUp积极态度者。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。CSS背景是最常用的CSS属性之一。但是，并非所有开发人员都知道使用多个上下文。这次是关于使用多个背景场景。在本文中，将详细介绍background-image`属性，并配图解释背景的各种使用方式及其实际好处。如果你还知道CSS背景属性，可以先去MDN查一下相关知识。简介CSS背景属性是以下属性的简写：背景剪辑、背景颜色、背景图像、背景原点、背景位置、背景重复、背景大小和背景附件。对于本文，我们将重点关注背景图像、背景位置和背景大小。你准备好了吗？开始吧！考虑以下示例：.element{background:url(cool.jpg)topleft/50px50pxno-repeat;}背景图像位于元素的左上角，大小为50px*50px。理解并记住位置和大小的顺序很重要。在上图中，background-position后面是background-size。它们的顺序不能颠倒，否则无效，如下图：.element{/*Warning:InvalidCSS*/background:url(cool.jpg)50px50px/topleftno-repeat;}BackgroundPosition的定位元素层的定位是相对于background-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;背景：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;}withCSSDrawing用CSS渐变来绘制的可能性是无穷无尽的，你可以使用linear-gradient或者radial-gradient等。接下来，让我们看看如何使用它的两个兄弟来绘制笔记本电脑。拆解笔记本电脑，看看我们需要使用什么渐变.拆笔记本电脑时，更容易想到如何使用多个CSS背景来实现。接下来是图纸。首先是将每个渐变定义为一个CSS变量及其大小。我喜欢使用CSS变量，因为它可以减少代码的复杂性，使代码更加简洁易读。:root{--case:线性渐变(#222,#222);--案例大小：152px103px；--显示：线性渐变（#fff，#fff）；--显示大小：137px87px；--reflection:linear-gradient(205deg,#fff,rgba(255,255,255,0));--反射尺寸：78px78px；--正文：线性渐变（#888，#888）；--正文大小：182px9px；--circle:radial-gradient(9px9pxat5px5.5px,#88850%,transparent50%);--circle-size:10px10px;}现在我们定义渐变和它们的大小，下一步是放置它们。考虑下图以获得更好的视觉解释。显示图像如前所述，您应该首先定义需要位于顶部的元素。在我们的例子中，显示图像应该是第一个渐变。显示LCD显示以x轴为中心，距y轴6px。显示器外壳外壳位于显示器下方，以x轴为中心，距y轴0像素。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。Body这是图中最有趣的部分。首先，身体是一个长方形，每边（左和右）有两个圆圈。最终结果:root{--case:linear-gradient(#222,#222);--案例大小：152px103px；--case-pos:center0;--显示：线性渐变（#fff，#fff）；--显示尺寸：137px87px；--display-pos:center6px;--reflection:linear-gradient(205deg,#fff,rgba(255,255,255,0));--反射尺寸：78px78px；--反射位置：右上角；--正文：线性渐变（#888，#888）；--正文大小：182px9px；--body-pos：中心底部；--circle:radial-gradient(9px9pxat5px5.5px,#88850%,transparent50%);--圆圈大小：10px10px；--circle-left-pos:左下；--circle-right-pos:右下角;}.cool{width:190px;高度：112px；背景图像：var(--reflection)，var(--display)，var(--case)，var(--circle)，var(--circle)，var(--body)；背景大小：var(--反射大小)，var(--显示大小)，var(--case-size)，var(--circle-size)，var(--circle-size)，var（-身体尺寸）;背景位置：var(--reflection-pos)，var(--display-pos)，var(--case-pos),var(--circle-left-pos),var(--circle-right-pos),var(--body-pos);背景重复：不重复；/*outline:solid1px;*/}混合多个背景混合多个背景可能会令人兴奋。假设您在CSS中有一张背景图片，您希望将其变成黑白图片。.hero{background:linear-gradient(#000,#000),url("landscape.jpg")center/cover;background-blend-mode:color;}人才的【三通】是小智一直分享的最大动力。本博客如有错误或建议，欢迎留言。最后谢谢大家的观看。原文：https://css-tricks.com/css-ba...代码部署后可能存在的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。在这里顺便给大家推荐一个好用的BUG监控工具Fundebug。交流文章每周更新一次。可以微信搜索【大千世界】立即阅读，回复【福利】还有很多前端视频等着你。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，欢迎Star。
