background-position的百分比是怎么计算定位的

最新推荐文章于 2021-08-03 21:53:13 发布
最新推荐文章于 2021-08-03 21:53:13 发布
阅读量1.5k 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jhqdlove/article/details/51518588
版权

首先，背景设置为no-repeat，定位坐标才可以生效

采用像素值来定位时，像素值意味着背景图片和元素左上角的差值。

采用百分比时，效果却很奇怪，0% 0%时背景图片和元素左上角对其，100% 100%时背景图片和元素右下角对齐。

查了资料，才知道原来采用百分比定位背景是遵守以下公式
x：（元素的宽度-图片的宽度）* X%

y：（元素的高度-图片的高度）* Y%

桃子不好吃哦
关注
专栏目录
CSS background-position 属性 定位图片
09-25
CSS background-position 属性定位图片 在 CSS 中，background-position 属性是设置背景图像的起始位置的属性。今天，我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...
background-position背景图片定位,图片位置计算问题
antybaby的专栏
05-29 6940
 background-position的说明：     设置或检索对象的背景图像位置.必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响.(在IE的几个版本中都是一样的,测试说明这里的意思就是:下文中容器(container)的宽度(即内容部分,没有包含border),这个宽度应该把padding也计算在内的.)     默认值为：
详解background-position
祥哥的说
05-02 1万+
你真的了解background-positionbackground属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background...
关于background-position的值为百分比的计算
frank_fong的博客
11-07 472
关于background-position的值为百分比的计算
如何去估值计算background百分比
井井
06-28 1542
这里说到的background百分比主要为background-size与background-position这种两种百分比的估值计算，如果有细微差到时候可以进行微调。
CSS中background-position使用技巧
weixin_33827965的博客
06-07 437
一.background-position:left top; 　　背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 　　背景图片的右下角和容器(container)的右下角对齐，...
css 之 background-position-x
10-30
background-position-x 属性的取值可以是长度单位（如 px、em、cm 等）、百分数或者关键字（如 left、center、right 等）。当取值为长度单位时，表示背景图片左上角相对于元素左上角的水平距离。当取值为百分数时，...
CSS background-position的使用说明详解
09-25
background-position属性的位置定位不会受到对象的padding（内边距）属性设置的影响，这表示背景图片的定位是相对于元素的内容区域进行的，不会被内边距所改变。 background-position的默认值为0% 0%，这意味着背景...
css top 定位百分比,CSS <position>值简介理解background百分比定位
weixin_39850787的博客
08-03 694
MDN上对值解释是：一种CSS数据类型，2D坐标空间，用来设置相对盒子的坐标。我们经常使用的background-position的值就是值，最近刚介绍的object-position的值也是值。值支持1~4个值，可以是具体数值，也可以是百分比，也可以是left, top, right, center, bottom关键字。可参考下图经典示意：如果偏移没有相应的关键字，则会被认为是center, ...
CSS背景background详解，background-position详解
会敲代码的男老师的博客
02-03 3万+
背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性，它们是： * ba
background-position中百分比是如何定位的？
请叫我二狗哥
04-28 1483
　　backgroud-positon使用百分比的定位十分怪异，它的值实际计算值并非与容器的宽度或者高度相乘。　　background-positon中容器坐标定位与百分比定位的换算：a——background-position的百分比数值；Px——容器坐标的定位位置；Dx——容器的宽（高）度值；dx——图片的宽（高）度值；换算公式：图片的background-position在容器坐标内的水平位...
CSS背景图像位置属性background-position百分比详解
freshlover的专栏
01-13 1万+
百分比值同关键字很接近，但其操作方式不一样。用百分比值来居中一幅背景图像，也很简单：    body { background-image;url(beijing.gif); background-repeat:no-repeat; background-position:50% 50%; }    这使得背景图像的中心同其父元素中心对齐。换句话说，百分比值同时应用于元素及其背景图
background-position百分比原理
weixin_34007020的博客
06-30 157
今天帮别人调代码时，看到一个样式： background-position: 50% 0;background-size: 100% auto； 对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。 对background-position很自然的以为百分比是根据父元素宽度计算的，但bac...
CSS基础知识——backgroung（背景）
吃货的博客
07-09 4311
/*****************************背景图*****************************/background （缩写形式）background-color （背景颜色）语法：background-color: "颜色";background-image （背景图片）语法：background-image: url("....");background-repe...
background-position设置百分比“失效了”！！
少油少盐不要辣
04-11 1240
1.background-position设置百分比的计算原理 当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）： 这是当background-size: auto;时，百分比有效。 (container width - image width) * (position x%) = (x offset value) (container heigh...
css定位的百分比的算法,css背景图片定位练习（二）： background-position的百分比...
weixin_39923157的博客
08-03 324
background-position:x y;百分比定位并不能直观的看出来，需要通过计算。background-position百分比计算公式：(容器宽度—背景图片的宽度)*x%=xpx(容器高度—背景图片的高度)*y%=ypx上节我们使用的图片也可以继续拿来做练习： 背景定位练习.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box...
CSS 背景位置 background-position属性
热门推荐
歪脖先生的博客
02-17 10万+
背景位置除了背景背景平铺外，CSS还提供了另一个强大的功能，即背景定位技术，能够精确控制背景在对象中的位置。默认情况下，背景图像都是从元素 padding 区域的左上角开始出现的，但设计师往往希望背景能够出现在任何位置。通过 background-position属性，可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为：background-position: xpos ypo...
CSS图片的百分比位置是如何进行计算的 ——w3c权威解释
无数_Mirage的博客
05-18 742
w2c权威解释，css图片的百分比位置是如何计算的，css元素的百分比位置计算原理
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值