博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
background-position属性的百分比用法
阅读量:5824 次
发布时间:2019-06-18

本文共 654 字,大约阅读时间需要 2 分钟。

hot3.png

之前使用background-position时经常用具体像素值作为参数,比如

background-position:20px 30px。
这种用法的效果很简单,就是背景图的左上角定点距离容器左边20px,距离上边30px,也就是背景图向右边移动20px,向下边移动30px。
但是,如果用%时就不能这样想了,或者说,不完全是这样。先来举几个。

background-position:0% 0%;

background-position:100% 100%;

background-position:50% 50%;

如何照原本的思想,background-position:50% 50%;不应该是背景图的左上角定点距离包裹元素左上角向右向下偏移50%距离吗?这样想就错了,实际上是,包裹元素的尺寸减掉背景图片的尺寸作为基数进行偏移,而不是以包裹元素的宽高作为基数偏移。

background-position:50% 50%解释:假设包裹层宽度300px,背景图宽度200px,则第一个50%实际上对应偏移像素值为(300px - 200px)*50%。显然,这样就是居中显示了。

同理,background-position:100% 100%,去掉背景图原始尺寸后,剩下的空余部分全部偏移了,当然是跑到右下角了。

总结:就一句话,不是以包裹层宽高作为基数进行偏移,而是剩余宽高作为基数进行偏移的!

转载于:https://my.oschina.net/u/3618644/blog/1477053

你可能感兴趣的文章
Microchip 125 kHz RFID System Design Guide
查看>>
深入jetty的使用详解
查看>>
ImageButton和Button区别
查看>>
$.post以后就取不到$(this)节点解决方法【转】
查看>>
上下文与会话
查看>>
cocos2d-x 3.0rc开发指南:Windows下Android环境搭建
查看>>
单一职责原则(设计模式六中)
查看>>
目标和制定周期问题
查看>>
eclipse 运行 emulator时,PANIC:Could not open emulator 的解决办法
查看>>
C程序两则
查看>>
AWS系列之三 使用EBS
查看>>
【CSWS2014 Summer School】大数据下的游戏营销模式革新-邓大付
查看>>
获取Winform窗体、工作区 宽度、高度、命名空间、菜单栏高度等收集
查看>>
android ButterKnife 解决重复findViewById
查看>>
异步操作超出页面超时时间
查看>>
centos7安装codeblocks教程
查看>>
Android中的音频播放(MediaPlayer和SoundPool)
查看>>
卓尼斯ZT-180评測
查看>>
mysql导入导出sql文件
查看>>
JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外...
查看>>