background-position百分比原理详解


Posted in HTML / CSS onMay 08, 2021

今天帮别人调代码时,看到一个样式:

background-position: 50% 0;
background-size: 100% auto;

对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放。

对background-position很自然的以为百分比是根据父元素宽度计算的,但background-position真的不是,它有一套自己的原理。下面详细介绍。

一、等价写法

在看各类教程时有以下等价写法:

  • top left, left top 等价于 0% 0%.
  • top, top center, center top 等价于 50% 0%.
  • right top, top right 等价于 100% 0%.
  • left, left center, center left 等价于 0% 50%.
  • center, center center 等价于 50% 50%.
  • right, right center, center right 等价于 100% 50%.
  • bottom left, left bottom 等价于 0% 100%.
  • bottom, bottom center, center bottom 等价于 50% 100%.
  • bottom right, right bottom 等价于 100% 100%.

那么为什么left,top就等价于0% 0%,right bottom等价于100% 100%呢?

二、background-position百分比计算公式

background-postion:x y;
x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

有了这个公式,就很容易理解百分百写法了,推算一下也就很容易理解上面各类等价写法了。

三、举例

1、background-position:center center等价于background-position:50% 50%等价于background-position:?px ?px

例子中用到背景图如下【尺寸:200px*200px】:

background-position百分比原理详解

背景图在容器中居中。

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
    background-position: center center;
}
</style>
<div class="wrap">
</div>

效果都是让背景图片居中

background-position百分比原理详解

如上通过设置百分比和关键字能实现背景图居中,如果要实现通过具体值来设置图片居中该设置多少?

根据上面公式:

x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;

y=(容器的高度-背景图高度)*y百分比=(300px-200px)*50%=50px;

即设置background-postion:50px 50px;

测试一下:

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
/*    background-position: center center;*/
    background-position: 50px 50px;
}
</style>
<div class="wrap">
</div>

效果同样居中。

到此这篇关于background-position百分比原理详解的文章就介绍到这了,更多相关background-position 百分比内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
CSS 新特性 contain控制页面的重绘与重排问题
CSS3新特性详解(五):多列columns column-count和flex布局
css position fixed 左右双定位的实现代码
Apr 29 #HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
CSS3实现的侧滑菜单
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
基于mysql的论坛(7)
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP微信分享开发详解
2017/01/14 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python如何保存文本文件
2020/06/07 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
联谊活动策划书
2014/01/26 职场文书
2014年创卫实施方案
2014/02/18 职场文书
商场父亲节活动方案
2014/08/27 职场文书
党性分析自查总结
2014/10/14 职场文书
工程催款通知书
2015/04/17 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers