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属性box-sizing使用指南
Dec 09 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
Python解析树及树的遍历
2016/02/03 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年减负工作总结
2014/12/10 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
离婚协议书范文
2015/01/26 职场文书
初一英语教学反思
2016/02/15 职场文书
多人股份制合作协议书
2016/03/19 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS