CSS 背景位置 background-position属性

除了背景背景平铺外，CSS还提供了另一个强大的功能，即背景定位技术，能够精确控制背景在对象中的位置。

默认情况下，背景图像都是从元素 padding 区域的左上角开始出现的，但设计师往往希望背景能够出现在任何位置。通过 background-position属性，可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为：

background-position: xpos ypos | x% y% | x y

CSS1中，background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。

上述语法格式表明，背景图像有 3 种定位方式：

1）xpos ypos：表示使用预定义关键字定位，水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。

关键字定位，应用的是对齐规则，而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐，即。

依然使用前面的背景图案 bg.gif，其尺寸为 100px * 100px，对象的尺寸为 200px * 200px，背景图像的位置使用预定义关键字定位。如：

div {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
background-repeat: no-repeat;
background-position: center center;
background-image: url(img/bg.gif);
}

上述定位，就表示背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置。运行结果如图 4‑28 所示：

图4-28 背景图像关键字定位

2）x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为：

x = (对象的宽度 - 图像的宽度) * x%;

y = (对象的高度 - 图像的高度) * y%;

还是上面的例子，改为百分比定位，要使背景图像居中，只需把背景图像的位置设置为50% 50% 即可。使用上面的公式，得到背景图像起始位置的坐标为：

x：(200px - 100px) * 50% = 100px * 50% = 50px

y：(200px - 100px) * 50% = 100px * 50% = 50px

得到的结果与上例相同，限于篇幅，就不再截图了。当然，百分比的值也可以是负值，计算公式依然不变。还是上面的例子，把百分比改为 -50% -50%。此时，得到背景图像起始位置的坐标为：

x：(200px - 100px) * (-50%) = 100px * (-50%) = -50px

y：(200px - 100px) * (-50%) = 100px * (-50%) = -50px

运行结果如图 4‑29 所示：

图4-29 背景图像百分比定位

从上图可以看出，此时的背景图像只显示了原本图像的 1/4，这是因为背景图像的起始位置向左、向上移动后，只有1/4 的图案落到了背景区域。由于背景被设置为不重复，所以，就只显示了原本图像的 1/4。

3）x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中（x, y）所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。

偏移量长度可以是正值，也可以是负值。x 为正值表示向右偏移，负值表示向左偏移；y 为正值表示向下偏移，负值表示向上偏移。背景图像发生移动后，就有可能超出对象的背景区域。此时，超出的部分将不会显示，只会显示落入背景区域的部分。

如果把上面的例子改为长度值定位，要使背景图像居中，只需把背景图像的位置设置为50px 50px 即可。它就表示背景图像的左上角顶点，相对于对象背景区域的左上角顶点在 x轴右移 50px，在 y 轴下移 50px。得到的结果依然是背景图像位于对象的中央。

在CSS3中，background-position属性支持 4 个参数值，前两个值用于横坐标，后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位，而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

如果只提供一个值，则第二个值为center。如果提供两个值，第一个长度或百分比表示水平偏移，第二个长度或百分比表示垂直偏移。长度或百分比，表示背景图像的左上角相对于背景位置区域左上角的偏移。如，下面几个声明给出了背景的起点相对于背景区域左上角的偏移：

background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 背景位置 background-position属性相关推荐

Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
CSS背景（background）
CSS背景backgroud 背景颜色(color) 背景图片(image) 背景平铺(repeat) 背景位置(position)重点背景附着背景简写背景透明(CSS3) 背景总结理解背景 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
css 背景颜色 background属性
背景颜色 background 含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图. 可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置. 主要的背景属性设置有: 设 ...
七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色.背景图片.背景图片的平铺方式和显示位置等. 1.background-color background-colo ...
CSS背景（background）篇
1. background概述 CSS 可以添加背景颜色和背景图片,以及来进行图片设置. 属性描述 background-color: 背景颜色 background-image: 背景图片地址 b ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
CSS中的定位——position属性
CSS定位指的是改变元素在页面中的位置. CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动绝对布局 CSS定位包含的属性有: 属 ...
css背景的设置及属性
背景 1.背景色:background-color 2.背景图:background-image: url( url) 3.background-repeat:是否平铺取值:no-repeat/re ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

CSS 背景位置 background-position属性

CSS 背景位置 background-position属性相关推荐

最新文章

热门文章