LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]CSS固定页面Body背景图像定位方法

admin
2023年7月19日 22:48 本文热度 940

导读

固定背景图片的通常方法就是把background-attachment设成fix,进一步的话自然则是用background-position,下面爱站技术频道的小编就给各位带来CSS固定页面背景图像定位方法。


挺常听见到有人问说,要如何才能让背景图片不管卷轴拉到那边都不会变?这其实只要透过设定 background-attachment 就能达到该效果了。

Body其实并不用做任何设定,这边我为了让网页有卷轴,所以在pre包起一段话:
 HTML

XML/HTML Code复制内容到剪贴板
  1. <body>  

  2. <pre>  

  3. 欢   

  4.     

  5. 迎   

  6.     

  7. 来   

  8.     

  9. 到   

  10.     

  11. 脚   

  12.     

  13. 本   

  14.     

  15. 之   

  16.     

  17. 家   

  18.     

  19. ,   

  20.     

  21. 若   

  22.     

  23. 有   

  24.     

  25. 任   

  26.     

  27. 何   

  28.     

  29. 问   

  30.     

  31. 题   

  32.     

  33. 还   

  34.     

  35. 请   

  36.     

  37. 多   

  38.     

  39. 留   

  40.     

  41. 言   

  42.     

  43. 指   

  44.     

  45. 教   

  46.     

  47. 了   

  48. </pre >  

  49. </body>  

接着来看CSS中的语法:
 CSS

CSS Code复制内容到剪贴板
    css
  1. body{   

  2.  /* 设定背景图片 */  

  3.  background-image:url("sakuya_and_remi.jpg");   

  4.  /* 让图片不重覆排列 */  

  5.  background-repeat:no-repeat;   

  6.  /* 固定背景图片位置 */  

  7.  background-attachment:fixed;   

  8. }  

只要把 background-attachment 设成 fixed 就能固定背景图片了。若是要取消固定的话,只要把 background-attachment 拿掉或是设成 none 就行了。而其中的 background-repeat 设成 no-repeat 是避免当背景图片太小张时,让它不要重覆的显示。

还有另一种常见的情况是,背景图片本身就只是小小张的,但想让它固定在网页的某一位置的话,我们除了用 background-attachment 之外,还要搭配 background-position 来一起使用。

Body一样不变,直接看CSS的部份:
 CSS

CSS Code复制内容到剪贴板
  1. body{   

  2.  /* 设定背景图片 */  

  3.  background-image:url("logo.gif");   

  4.  /* 让图片不重覆排列 */  

  5.  background-repeat:no-repeat;   

  6.  /* 固定背景图片位置 */  

  7.  background-attachment:fixed;   

  8.  /* 设定背景图片在右下角 */  

  9.  background-position:rightright bottombottom;   

  10. }  

background-position 值的设定可用数字加单位、数字加百分比或是使用关键字。background-position 基本上需要两各值,第一个是距离左边界的值,另一个则是距离上边界的值。但是若是要在中间的话,可以设一个 center 就可以了,另一个若没有的话,会自动认为也是 center。

background-position 位置的相对关系可以参考下面的图解。

怎样~是不是很简单呢!以上就是CSS固定页面背景图像定位方法。


该文章在 2023/7/19 22:48:45 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved