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. bzoj 3809 Gty的二逼妹子序列——莫队+分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3809 容易想到树状数组维护值域.但修改和查询都是 log 太慢. 考虑有 nsqrt(n) ...

  2. 错误 128 无法将类型“string”隐式转换为“System.Windows.Forms.DataGridViewTextBoxColumn”

    原因是DataGridView中列的Name属性值和DataPropertyName属性值一样,比如Name="CardID",DataPropertyName="Car ...

  3. 杂项:SVN 常用方法

    ylbtech-杂项:SVN 1.返回顶部 1. bin obj *.suo*.user *.csproj.user *.o *.lo *.la *.al .libs *.so *.so.[0-9]* ...

  4. Bean的基于XML配置方式

    基于XML配置 Beans.xml <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns= ...

  5. ubuntu系统下挂载新的硬盘

    参考 http://zwkufo.blog.163.com/blog/static/258825120141283942244/     http://blog.csdn.net/caicai2526 ...

  6. 启动Android模拟器问题集锦

    1.新建AVD时,报错“no CPU/ABI system image available for this target”, 解决:在SDK Manager中下载System Image 2.Sys ...

  7. 微信小程序开发之页面数据绑定

    js:Page( { data:{ parmer:"",             //字符串参数 userinfo:{      userphone:"",   ...

  8. Flutter实战视频-移动电商-51.购物车_Provide中添加商品

    51.购物车_Provide中添加商品 新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有 ...

  9. PXE与cobbler实现系统自动安装

    安装操作系统的流程事实上并不复杂,如果你要给三五台服务器安装系统那么我们手工去安装即可.但是当我们要部署的是大型机房的操作系统的时候显然手动安装去一台一台的点,是不现实的.尤其现在互联网行业高速发展, ...

  10. mysql 事务 存储过程 函数

    一:事务: 开启一个事务可以包含一些SQL语句,这些sql语句要么同时成功, 要么一个都别想成功, 称之我事务的原子性 事务用于将某些操作的多个SQL 作为原子性操作, 一旦有某一个出现错误, 即可以 ...