84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
dome在这 https://jsfiddle.net/d1LpL9eu/
background-position: calc(100% - 40px) calc(100% - 20px);
background-position前两个值应该是水平和垂直位置，分别是从左边和上边开始计算的，为什么calc(100% - 40px)是从右侧开始计算的？calc中的100%指的是图片还是容器呢？
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
calc(100% - 40px)将背景图的右边和容器的右内边界对齐，然后再向右移动40个像素calc(100% - 20px);将背景图的下边和容器的下内边界对齐，然后再向上移动20个像素
calc(100% - 40px)
calc(100% - 20px);
background-position在使用百分比时，对容器和背景都有效,水平方向从左边开始计算，垂直方向从上边开始计算.也就是background-position:50% 50%，会将容器的水平方向的50%的位置和背景图50%的位置对齐，同时将垂直方向的50%的位置和背景图的50%的位置对象，效果就是背景图放在容器的中间位置
background-position:50% 50%
1、
.box { background-position: calc(100%) calc(100%); }
算出来就是在右下角，这就一目了然了~后面的就没啥事儿了~
2、此处calc中的100%指的是
.box { background-position: calc(x) calc(y); }
知道伐？
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度（通过计算取得结果值）。而x方向:calc(100% - 40px)表示总宽度 - 40px,其中的100%，是容器的总宽度(总高度)。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
calc(100% - 40px)将背景图的右边和容器的右内边界对齐，然后再向右移动40个像素
calc(100% - 20px);将背景图的下边和容器的下内边界对齐，然后再向上移动20个像素
background-position在使用百分比时，对容器和背景都有效,水平方向从左边开始计算，垂直方向从上边开始计算.
也就是
background-position:50% 50%，会将容器的水平方向的50%的位置和背景图50%的位置对齐，同时将垂直方向的50%的位置和背景图的50%的位置对象，效果就是背景图放在容器的中间位置1、
算出来就是在右下角，这就一目了然了~后面的就没啥事儿了~
2、此处calc中的100%指的是
知道伐？
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度（通过计算取得结果值）。而x方向:calc(100% - 40px)表示总宽度 - 40px,其中的100%，是容器的总宽度(总高度)。