body和普通div背景图的区别

 background: url(//m.360buyimg.com/mobilecms/s220x220_jfs/t2746/167/831241799/299152/1731092b/5728423cNa16c83cb.jpg!q70.jpg);
    background-size: 100% 100%;
    position: absolute;
    height: 100px;
    width: 100%; 
 
 
 你给body这个设置，和给一般的div这样设置，都把他们的父级设为relative，没有高度
会发现区别：

这样的设置div，可以出现背景图；而body这样设置 的没有

结论：

当你设置body为absolute或者fixed,relative时，他的背景的宽高百分比其实取的是相对于body的父级，也就是html

body和普通div背景图宽高百分比的区别的更多相关文章

  1. 背景图宽高100%无法无法显示的问题【body设置relative，当前元素absolute】

    以下1,2两个关键元素 body{   width:100%;   height:100%;   position:relative; //1 } .login-form { width: 100%; ...

  2. 多个div背景图无缝拼接

    公司在做环形进度条的时候遇到了这个问题,上网一搜,原来是因为两个div背景图拼接起来的,所以中间出现了必不可少的缝隙,最后把position改为relative,再加个margin:0,就解决好了,下 ...

  3. div的最小宽高和最大宽高

    div的最小宽高和最大宽高很少使用但是很实用,今天敲代码,就遇到了,要在div里设置滚动条,众所周知,一般是设overflow-y:auto,但需要一个高度,只有div里的内容超过这个高度时,才会有滚 ...

  4. css背景图充满屏幕

    代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...

  5. css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

    近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...

  6. css 快捷修改 checkbox 及 radio的背景图

    在CSS内选择要修改的input input[type=checkbox]:disabled{ //input类型等于复选框并且是disabled状态的所有(根据情况自由指定) -webkit-app ...

  7. IE6下 input 背景图滚动问题及标签规范

    ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...

  8. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  9. table-cell设置宽高、居中

    table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...

随机推荐

  1. Python 黑帽子第二章运行截图

  2. HTTP Status 500 - Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

    如果在service类上面没有添加注解,出现异常 @Transactional

  3. Ubuntu 安装Guake

    一款代替终端的软件, 只需按F12就可以调出终端, 再按就消失, 附上Github链接. https://github.com/Guake/guake 一开始没安装上去, 后来成功, 现在用着还不错, ...

  4. HTML5的LocalStorage实现记住密码

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 localStorage ...

  5. linux中网络编程<1>

    1 网络编程API (1)网络层的ip地址可以唯一标识网络中的主机,传输层通过协议+端口唯一标识主机中的应用程序.这样以来使用三元组(地址,协议,端口)标识网络的进程. (2)socket---> ...

  6. ThinkPHP3.2.3中，查询语句中in的使用方法。

    //删除分类 public function del(){ $cid = I('get.cid'); $cate = M('category')->field('cid,pid')->se ...

  7. python---socket与socketserver

    1.socket的方socket.getaddrinfo(host, port, family=0, type=0, proto=0, flags=0) #获取要连接的对端主机地址sk.bind(ad ...

  8. 在CentOS6.6上以replSet方式部署MongoDB集群

    此文已由作者袁欢授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 部署方式在3台centos6.6系统上以Replica Set方式部署mongodb3.0.2集群. 官方参考 ...

  9. PorterDuffXfermode 图像混合技术在漫画APP中的应用

    此文已由作者游葳授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 写在开头 随着应用开发的深入,视觉同学在完成了页面的基本设计后,再也按耐不住心中的寂寞,开始对各种细节不满意, ...

  10. E20180514-hm

    invalid  adj. 无效的; 不能成立的; 有病的; 病人用的; readiness n. 准备就绪; 愿意,乐意