作者：Ahmad shaded
译者：前端小智
起源：sitepoint
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。CSS background是最罕用的CSS属性之一。然而，并不是所有开发人员都晓得应用多种背景。这段时间都在关注应用多种背景场景。在本文中，会具体介绍background-image`属性，并联合图形来解释多个背景应用形式以及其理论益处。
如果你还理解 CSS background 属性，能够去先 MDN 查看相干的常识。
介绍
CSS background属性是以下属性的简写:
background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size 和 background-attachment.
对于本文，将重点介绍background-image，background-position和background-size。 你筹备好了吗？ 让咱们开始吧！
思考上面的例子:
.element { background: url(cool.jpg) top left/50px 50px no-repeat;}背景图片位于元素的左上角，大小为50px * 50px。 理解并记住地位和大小的程序很重要。
在上图中，background-position前面是background-size。它们的程序是不能调换的，否则有效，如下所示：
.element { /* 正告：有效的CSS */ background: url(cool.jpg) 50px 50px/top left no-repeat;}Background Position
元素的定位绝对于background-origin属性设置的定位层。我喜爱background-position的灵活性，它有多种定位元素的形式：
- 关键字值（
top，right，bottom，left，center） - 百分比值，如:
50% - 长度值，如:
20px,2.5rem - 边缘偏移值，如：
top 20px left 10px
坐标零碎从左上角开始，默认值为0% 0%。
值得一提的是，top left的值与left top的值雷同。 浏览器足够聪慧，能够确定其中哪个个用于x轴，哪个用于y轴。
.element { background: url(cool.jpg) top left/50px 50px no-repeat; /* 下面与上面雷同 */ background: url(cool.jpg) left top/50px 50px no-repeat;}Background Size
对于background-size属性，第一个是width，第二个是height。
不用应用两个值，你能够应用一个值，它示意宽度和高度都一样。
当初，我曾经理解了CSS background的工作原理，上面来探讨下如何应用多个背景。
多个背景
background属性能够具备一层或多层，以逗号分隔。 如果多个背景的大小雷同，则其中一个将笼罩另一个背景。
.element { background: url(cool.jpg) top left/50px 50px no-repeat, url(cool.jpg) center/50px 50px no-repeat;}在上图中，咱们有两个背景层。每个地位都不同。这是多背景的根本用法，让咱们钻研一个更高级的示例。
搁置程序
当搁置多个背景时，其中一个背景占据其父级的全副宽度和高度时，搁置程序可能会有点乱，思考上面例子：
.hero { min-height: 350px; background: url('table.jpg') center/cover no-repeat, url('konafa.svg') center/50px no-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等。接着，咱们来看看如何应用它两兄弟绘制笔记本电脑。
拆解笔记本电脑，看看咱们须要应用什么突变。
拆解笔记本电脑的时，更容易思考如何应用多个 CSS 背景来实现它。
接下来是图纸。 首先是将每个突变定义为CSS变量及其大小。 我喜爱应用CSS变量，因为它能够缩小代码的复杂性，使代码更简洁，更易于浏览。
:root { --case: linear-gradient(#222, #222); --case-size: 152px 103px; --display: linear-gradient(#fff, #fff); --display-size: 137px 87px; --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0)); --reflection-size: 78px 78px; --body: linear-gradient(#888, #888); --body-size: 182px 9px; --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%); --circle-size: 10px 10px;}当初咱们定义了突变及其大小，下一步是搁置它们。 思考下图，以取得更好的视觉解释。
显示影像
如前所述，应该首先定义须要在顶部的元素。 在咱们的状况下，显示影像应该是第一个突变。
显示 LCD
显示屏位于x轴核心，距y轴6px。
显示 外壳
外壳位于显示器下方，位于x轴的核心，距y轴的地位为0px。
主体
这是图形中最乏味的组件。 首先，主体是一个矩形，每个侧面（左侧和右侧）有两个圆圈。
最终后果
:root { --case: linear-gradient(#222, #222); --case-size: 152px 103px; --case-pos: center 0; --display: linear-gradient(#fff, #fff); --display-size: 137px 87px; --display-pos: center 6px; --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0)); --reflection-size: 78px 78px; --reflection-pos: top right; --body: linear-gradient(#888, #888); --body-size: 182px 9px; --body-pos: center bottom; --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%); --circle-size: 10px 10px; --circle-left-pos: left bottom; --circle-right-pos: right bottom;}.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); background-position: 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: solid 1px;*/}混合多种背景
混合应用多个背景时会令人兴奋。 考虑一下您在CSS中有一个背景图像，并且想要将其变成黑白图像。
.hero { background: linear-gradient(#000, #000), url("landscape.jpg") center/cover; background-blend-mode: color;}人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。
原文：https://css-tricks.com/css-ba...
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
交换
文章每周继续更新，能够微信搜寻【大迁世界 】第一工夫浏览，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。