background-position 详解
2024-10-20 07:48:26
一、语法
语法:background-position:x, y;
定义:背景图片相对容器原点的起始位置;
取值:
关键字:top | center | bottom | left | center | right
百分比:百分数
具体值:px、rem、em等确值
默认值为:0% 0%(即坐标原点)
二、定位原理
(图一)
容器:background作用的元素,即其视口,超出该容器的部分,将被隐藏。
如(图一),以容器的起始点作为原点(0,0)绘制背景图片的起始位置坐标轴。
background-position将定义背景图片起始于坐标轴的哪个位置,浏览器将其他部分隐藏,仅显示容器内的背景内容。
例子:
(图二) (图三)
如(图二),设置background-position: -50px -50px,背景图的起始点位于(-50px, -50px);
由此,显示的背景是被截断后的容器内的图片内容,如(图三)所示,其他象限遮罩部分图片不可见。
总结:background-position为背景图的起始点,可相对整个坐标轴进行定位,且仅容器内的背景图内容可见。
三、换算关系
换算关系:关键字 -> 百分比 -> px(or rem em等)
1、关键字 -> 百分比
center -> 50%
left top -> 0%
right bottom -> 100%
2、百分比 -> px
(容器(container)的size — 背景图片的size) * 百分比
如:background-position: a% b%;
换算:
x = (containerWidth - bgWidth) * a%
y = (containerHeight - bgHeight) * b%
最新文章
- C++异常处理:try,catch,throw,finally的用法
- [转]redis-cli的一些有趣也很有用的功能
- AWS EC2 复制实例后,自定义指标无法显示数据
- eclipse安装spring插件
- sql server 中一次insert 多条的写法
- 要学JavaScript!进来看吧,反正不花钱!~
- [leetcode]_Roman to Integer
- oracle PL/SQL(procedure language/SQL)程序设计之触发器(trigger)
- I/O输出端口照明LED
- Java多线程-线程的同步与锁【转】
- Spock - Document -02 - Spock Primer
- [转]angular 禁止缓存
- Tomcat搭建Web 应用服务器
- 启用chacha20和salsa20等加密方法
- typedef定义数组类型
- 4-java 格式化输出
- Spark 集群搭建
- Linux 通过cron定期执行 php文件(转)
- ubuntu安装mysql步骤
- jquery ajax 超时设置