您现在的位置:主页 > 常见问题 > 武汉做网站相关问题 > 正文

CSS属性定义背景图像及背景图像定位详解

时间:2015-03-04 22:36 来源:未知 点击:
      背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一。背景(background)在CSS2中包括五个属性:分别是:background-color: 指定填充背景的颜色。 background-image: 引用图片作为背景。background-position: 指定元素背景图片的位置。background-repeat: 决定是否重复背景图片。background-attachment: 决定背景图是否随页面滚动。剔除三个常用的和最后一个不常用的,今天欣零点的小编主要跟大家分享一下background-position(背景图片的定位)。

背景定位(background-position)

background-position 属性用来控制背景图片在元素中的位置。技巧是,实际上指定的是图片左上角相对于元素左上角的位置。
下面的例子中,设置了一个背景图片并且用 background-position 属性来控制它的位置,同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置,第二个是 y 轴(垂直) 位置。

/* 例 1: 默认值 */ 
background-position: 0 0; /* 元素的左上角 */ 
   
/* 例 2: 把图片向右移动 */ 
background-position: 75px 0;  
   
/* 例 3: 把图片向左移动 */ 
background-position: -75px 0;  
   
/* 例 4: 把图片向下移动 */ 
background-position: 0 100px;


background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。

关键词是不用解释的。x 轴上:

* left* center* right
y 轴上:

* top* center* bottom
顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y 轴,像这样:

background-position: right top;
使用百分数时也类似。需要主要的是,使用百分数时,浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下:

background-position: 100% 50%;

使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点,和元素的 100%(right) 50%(center) 这个点对齐。

这再一次说明了,我们一直认为已经掌握的简单的东西,其实还有我们有限的认知之外的知识。

注意原点总是左上角,最终的效果是笑脸图片被定位在元素的最右边,离元素顶部是元素的一半,效果和 background-position: right center; 一样。

copyright@欣零点网络科技有限公司 All rights reserved 360网站安全检测平台 地址:武汉市东湖高新区鲁磨路联峰大厦14层 电话:13476019269(刘先生)027-66000068 技术支持:欣零点