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

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

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。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

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

CSS中的position定位属性
一.文档流在分析position定位之前可以先简单了解下CSS中的脱离文档流是什么意思. 文档流:可以理解为元素的一种状态,处于这种状态下的元素具有一些特性. (更加详细的文档流讲解可到<关于 ...
CSS中background的背景属性标准写法
单个属性的写法书写格式: background-color:#CCCCCC; /*背景颜色*/background-image: url(sample.gif); /*背景图片*/backgroun ...
css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Position属 ...
CSS中的Position、Float属性的一些深入探讨
为什么80%的码农都做不了架构师?>>> HTML布局的基本要点: 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(bo ...
【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
position属性中的几个属性值
CSS的position属性中的几个属性值 position属性 position属性 position属性有以下属性值: absolute.fixed.relative.static.sticky. ...
[css] css中的选择器、属性、属性值区分大小写吗？
[css] css中的选择器.属性.属性值区分大小写吗? 选择器和属性区分大小写,属性值如果是颜色可以不区分大小写吧个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
CSS中内容的剪切属性clip
1. 在CSS中,可以使用剪切属性对元素内容的可视化区域进行控制,剪切区域所使用的属性时clip属性, 用来裁剪元素的可视化区域,内容的剪切属性可以使用2种属性值,一种为auto值,另一种为区域值,语 ...
position 的属性值
理论上来说,全部 position 的取值有8个包括:position:static | relative | absolute | fixed | sticky | initial | inhe ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...

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

百分数值

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

最新文章

热门文章