+ -
当前位置:首页 → 问答吧 → CSS偏移量

CSS偏移量

时间:2010-07-21

来源:互联网

偏移量在web前端用的很广泛,能够通过一张图片实现整个页面的布局。
主要用到的参数:
    width:显示部分的宽度
    height:显示部分的高度
    background-image: 图片文件
    background-position:定位要显示部分(通过左、上2个参数)

实例:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. #pianyi {
  8.         background-image:url(login_pic.png);
  9.         background-position:-107px -78px;
  10.         width:65px;
  11.         height:187px;
  12. }
  13. #py {
  14.         width:91px;
  15.         height:37px;
  16.         background-image:url(1.jpg);
  17.         background-position:-174px -133px;
  18. }


  19. </style>
  20. </head>

  21. <body>
  22. <div id="pianyi">

  23. </div>

  24. <div id="py">

  25. </div>

  26. </body>
  27. </html>
复制代码

作者: wtwei   发布时间: 2010-07-21

CSS Sprite还不错的。

不过做起来效率不高,修改的时候也挺麻烦的,考验前端开发人员的耐心细心。

作者: diggbox   发布时间: 2010-07-21

相关阅读 更多