css中background-position:的属性值为百分比时的用法

爱被打了一巴掌 2022-07-14 10:19 113阅读 0赞

如果定位用的是百分比话，算法比较特殊。我举个例子：

background:#FFF url(image) no-repeat fixed 50% -30%;

这个时候图片应该在容器的什么位置呢,算法公式如下：

图片左顶点距容器左顶点的坐标位置为

x：（容器的宽度-图片的宽度）x 50%

y：（容器的高度-图片的高度）x（-30%）

得到的结果应用坐标法则，差值如果为负数，百分比为正那么运算结果是负值。如果差值为负数，

百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。   
  
比如：容器是width：600px；height：600px；而图片是width：200px；height：200px；

我们用上面的样式，可以得到图片位置为：

x：(600px-200px)\*50%

y：(600px-200px)\*(-30%)

如下图：

相关链接

### 百分数值 ###

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:50% 50%;
      }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:66% 33%;
      }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中position属性的用法

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right

阳光穿透心脏的1/2处/ 2023年06月24日 08:08/ 0 赞/ 11 阅读

相关 CSS中margin属性值的含义

margin 定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明这个简写属性设置一个元

快来打我*/ 2023年02月08日 12:51/ 0 赞/ 36 阅读

相关去除对象中的原始值属性、引用值属性值为空的属性——函数封装

在工作中，在调取接口时，经常需要往后端传递数据，如果后端那边没有对数据进行处理的话，则会因为一些空的数据导致接口调取失败。。 var obj = { "supplie

阳光穿透心脏的1/2处/ 2022年10月16日 06:24/ 0 赞/ 193 阅读

相关 JavaScript中的backgroundPosition的设置

在CSS中background-position有对值的设置有两种：一是用数值（绝对的），另一个使用百分比（相对的）。这两种方式会有不同的浏览器兼容问题（主要是IE和FF）。

ゝ一纸荒年。/ 2022年08月07日 04:45/ 0 赞/ 197 阅读

相关 css中background-position:的属性值为百分比时的用法

如果定位用的是百分比话，算法比较特殊。我举个例子： background:FFF url(image) no-repeat fixed 50% -30%; 这个时候

爱被打了一巴掌/ 2022年07月14日 10:19/ 0 赞/ 114 阅读

相关 css中的vertical-align用法

vertical-align分类： 1.线类：baseline top middle bottom 2.文本类: text-top text-bottom 3.上

向右看齐/ 2022年06月09日 04:26/ 0 赞/ 206 阅读

相关 CSS 中的高度百分比

CSS 中可以使用%来给定指定元素的大小，也就是高度、宽度、margin，padding 等等，但是相信很多人都对百分比表示法的具体含义并不清楚，那么不懂就练，毕竟是检验真理的

朴灿烈づ我的快乐病毒、/ 2022年02月21日 00:41/ 0 赞/ 237 阅读

相关 css3——border-image属性的用法

项目需求是实现鼠标移到按钮上时，下方显示一张渐变的三角图片，于是想到使用border-image来实现。实现要使用图片做边框背景我们至少需要`border-image-so

旧城等待，/ 2021年12月23日 11:21/ 0 赞/ 361 阅读

相关 css属性值的计算过程

\\属性值的计算过程一个一个元素依次渲染,顺序按照页面文档的树形目录结构进行(深度优先渲染) 渲染每个元素的前提条件:该元素的所有css属性必须有值一个元素从所

系统管理员/ 2021年12月12日 07:07/ 0 赞/ 284 阅读

相关 css——overflow属性用法

1、overflow属性规定如何处理如何处理不符合元素框的内容。 2、取值：Object.style.overflow=visible|hidden|scroll|auto；

朴灿烈づ我的快乐病毒、/ 2021年12月12日 02:37/ 0 赞/ 313 阅读