background-position 是如何计算的
来源:学生作业帮 编辑:作业帮 分类:数学作业 时间:2024/05/11 20:30:35
background-position 是如何计算的
ackground-position:0% 0%;
这表示背景图片的左上角与容器的左上角对齐?的确是这个现象,但话不能这么说,因为 background-position 计算位置时用的并不是背景图片的左上角作为基点.
background-position 是将背景图片的中心点作为基点
如上图,容器是 400px * 400px,背景图片是 200px * 200px,上图是:background-position:50% 50%.
那么 background-position:0% 0% 时:第一个 0% 就代表背景图片的中心点与左边红线重合;第二个 0% 就代表背景图片的中心点与上边红线生命.
那么 background-position:100% 100% 时:第一个 100% 就代表背景图片的中心点与右边红线重合;第二个 100% 就代表背景图片的中心点与下边红线生命.
也就是说在 0%-100% 之间,图片的中心点被限制在一个范围内:
这个范围距离容器左边缘右边缘均是背景图片宽度 / 2.
这表示背景图片的左上角与容器的左上角对齐?的确是这个现象,但话不能这么说,因为 background-position 计算位置时用的并不是背景图片的左上角作为基点.
background-position 是将背景图片的中心点作为基点
如上图,容器是 400px * 400px,背景图片是 200px * 200px,上图是:background-position:50% 50%.
那么 background-position:0% 0% 时:第一个 0% 就代表背景图片的中心点与左边红线重合;第二个 0% 就代表背景图片的中心点与上边红线生命.
那么 background-position:100% 100% 时:第一个 100% 就代表背景图片的中心点与右边红线重合;第二个 100% 就代表背景图片的中心点与下边红线生命.
也就是说在 0%-100% 之间,图片的中心点被限制在一个范围内:
这个范围距离容器左边缘右边缘均是背景图片宽度 / 2.
background-position 是如何计算的
CSS background-position 定义背景具体位置如何计算?
CSS background-position的用法
background-position:bottom right
请问background-position:left center;
background-position:top left,bottom right,0 0,0
location position的区别是
background.
background
CSS中的background和background-color的区别
background里的数值是什么意思?
the liquidity position 怎么计算