登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

百分比进行背景图片定位(转)  

2011-01-24 21:12:45|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  大部分人应该习惯于使用描述性词语(left、top、center…)或者数值(20px、1em…)对背景图片定位,百分比可能比较少用,常见的有50%、100%等数值。例如希望背景图片水平居中,距离容器顶部20px,可以使用

CSS代码
  1. background-position: 50% 20px;   

之所以不使用

CSS代码
  1. background-positioncenter 20px;   

是因为类似这种描述性词语和数值混用的形式不被W3C推荐。(单纯的描述性词语组合使用是没有问题的,例如:background-position: right bottom;)

使用百分比进行定位的好处是可以利用CSS的计算功能,达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中,使用

CSS代码
  1. background-position150px 150px;   

可以看到背景图片的左上角顶点(坐标0,0)定位到了齐容器的中心点(坐标150px,150px)。
css

 

  而把150px替换为50%,使用

CSS代码
  1. background-position: 50% 50%;  

  看到的并不是如下的效果

css

  而是这样 

css

 

  可见,CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用

CSS代码
  1. background-position: 100% 100%;  

  定位的时候,图片被放置在容器的右下角,而并没有跑出容器。(如果使用 background-position: 300px 300px; 的话,背景图片会被移出容器)

  同样,如果使用

CSS代码
  1. background-position: 20% 20%;  

  会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。

 

(原文来自硅谷动力:http://www.enet.com.cn/article/2008/1024/A20081024378127.shtml)

  评论这张
 
阅读(549)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018