84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
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%，是容器的总宽度(总高度)。
![[웹 프런트엔드] Node.js 빠른 시작](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%，是容器的总宽度(总高度)。