每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺。这样UI的效果达不到也会很难看。

本来我想用body{background: url(img.jpg) no-repeat top center;}的办法来拉伸的,但是在360的兼容模式浏览器就不行了。因为这是CSS3的属性。而CSS2本身没有这个属性,那怎么办呢?!

可以利用一个DIV层,在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的目的。

首先在Body中加入下面的代码:
代码如下:
<div id="bg"><img src="img.jpg" /></div>
然后加入CSS代码:
div#bg{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
div#bg > img {
height:100%;
width:100%;
border:0;
}
这样就保证了UI的效果!也保证了兼容性。

最新文章

  1. ZKW线段树
  2. R语言 批量规划求解
  3. [web安全]Web应用漏洞攻击分析与防范
  4. Virtualbox虚拟机安装CentOS6.5图文详细教程
  5. python 从文件导入分类
  6. virtualenv and virtualenvwrapper on Ubuntu 14.04
  7. MySql 定时备份数据库
  8. Linux下各硬件装置的文件名
  9. WPF的控件Binding的ElementName/RelativeSource具体用法
  10. JavaScript语言常量和变量
  11. jquery set selected for select element
  12. jsp空页面导致的jvm heap溢出
  13. Android 模拟系统事件(三)
  14. PL SQLDEVELOPMENT导出数据库脚本
  15. E - Triangle
  16. [进程管理]linux 下 进程和线程的区别(baidu 面试)
  17. php面向对象1
  18. mssql server for docker on MacOs
  19. C#中的枚举(Enum)你知道多少呢?
  20. 关于LayoutInflater的错误用法(警告提示:Avoid passing null as the view root)

热门文章

  1. 安卓状态栏通知Status Bar Notification
  2. NSArray使用小结
  3. (转载)iOS 多媒体
  4. win7添加usb3.0驱动(错误代码1392,文件或目录损坏且无法读取)
  5. HTML5音频
  6. python之pandas模块
  7. Silverlight js html 相互调用
  8. MHA环境搭建【3】node相关依赖的解决
  9. Gizmos绘制塔防游戏网格
  10. ios 多线程 面试