您的位置:首页技术文章
文章详情页

css - 关于background-position百分比的问题?

【字号: 日期:2023-07-17 15:09:13浏览:111作者:猪猪

问题描述

dome在这 https://jsfiddle.net/d1LpL9eu/

background-position: calc(100% - 40px) calc(100% - 20px);

background-position前两个值应该是水平和垂直位置,分别是从左边和上边开始计算的,为什么calc(100% - 40px)是从右侧开始计算的?calc中的100%指的是图片还是容器呢?

问题解答

回答1:

calc(100% - 40px)将背景图的右边和容器的右内边界对齐,然后再向右移动40个像素calc(100% - 20px);将背景图的下边和容器的下内边界对齐,然后再向上移动20个像素

background-position在使用百分比时,对容器和背景都有效,水平方向从左边开始计算,垂直方向从上边开始计算.也就是background-position:50% 50%,会将容器的水平方向的50%的位置和背景图50%的位置对齐,同时将垂直方向的50%的位置和背景图的50%的位置对象,效果就是背景图放在容器的中间位置

回答2:

1、

.box { background-position: calc(100%) calc(100%);}

算出来就是在右下角,这就一目了然了~后面的就没啥事儿了~

2、此处calc中的100%指的是

.box { background-position: calc(x) calc(y);}

知道伐?

回答3:

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度(通过计算取得结果值)。而x方向:calc(100% - 40px)表示总宽度 - 40px,其中的100%,是容器的总宽度(总高度)。

标签: CSS
相关文章: