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. 「LuoguP3808」 【模板】AC自动机（简单版）

    题目背景 通过套取数据而直接“打表”过题者,是作弊行为,发现即棕名. 这是一道简单的AC自动机模板题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. ...

  2. js 弹出QQ对话框

    首先打开下面链接,开通QQ推广. http://shang.qq.com/v3/index.html 然后在页面代码中写入 <a target="_blank" href=& ...

  3. C++之static类成员，static类成员函数

    0.static修饰类中成员,表示类的共享数据 1.static类成员 在C++primer里面说过,static类成员不像普通的类数据成员,static类数据成员独立于一切类对象处在.static类 ...

  4. Linux下的RTC子系统

    转自:http://blog.csdn.net/weiqing1981127/article/details/8484268 实时时钟的作用主要是为操作系统提供一个可靠的时间,并在断电下,RTC时钟也 ...

  5. linux进程状态D和Z的处理

    长期生活在 Linux 环境里,渐渐地就有一种环保意识油然而生.比如,我们会在登录提示里写上"悟空,我跟你说过叫你不要乱扔东西,乱扔东西是不对的.哎呀我话没说完你怎么把 棍子扔掉了?月光宝盒 ...

  6. java web 工程找不到tomcat类 java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

    ava.lang.ClassNotFoundException: com.mysql.jdbc.Driverat org.apache.catalina.loader.WebappClassLoade ...

  7. Asset Catalog Help (四)---Adding an iOS App Icon Set or Launch Image Set

    Adding an iOS App Icon Set or Launch Image Set Organize different resolutions of your app icons and ...

  8. 极客时间_Vue开发实战_05.Vue组件的核心概念(1)：属性

    05.Vue组件的核心概念(1):属性 代码地址: https://github.com/tangjinzhou/geektime-vue-1/blob/master/%E6%BC%94%E7%A4% ...

  9. 技术胖Flutter第四季-21导航的参数传递和接受-2

    21导航的参数传递和接受-2 视频地址 https://www.bilibili.com/video/av35800108/?p=22 博客地址:https://jspang.com/post/flu ...

  10. LeetCode： 521 Longest Uncommon Subsequence I(easy)

    题目: anysubsequence of the other strings. A subsequence is a sequence that can be derived from one se ...