body和普通div背景图宽高百分比的区别

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时，他的背景的宽高百分比其实取的是相对于body的父级，也就是html

时间： 2024-09-26 16:05:20

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

多个div背景图无缝拼接

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

里面的div没有设置宽高，用padding设置的50px来撑开宽高，这个时候就需要用position：absolute或者relative来让文本去掉继承的外层的整宽度

1. <!DOCTYPE html><html><head><style>*{margin:0px;padding:0px;}#div1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;} #div2{padding:50px;position: absolute;border: 1px solid black;b

jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法 height():带参数设置,不带参数获取,参数是number类型 width():带参数设置,不带参数获取,参数是number类型 innerHeight() :内边距+内容的高度 innerWidth() :内边距+内容的宽度 outerHeight:上下内边距+内容+上下边框 outerWidth :左右内边距+内容+左右边框案例测试: <!DOCTYPE html> <html lang="en"> <head> &

解决-使用html2canvas截取页面时，页面的div背景图无法截取并跨域

今天在研究html2canvas截取页面的时候,发现截取后的图片没有把应该截取元素的背景图片截掉,背景图片空白.此时谷歌浏览器控制台报Failed to load resource: net::ERR_CACHE_MISS 和图片跨域的错误. 使用了useCORS: true后还是无法解决这个问题.于是就自己想办法,既然不同域名下的图片会有跨域问题,那么将图片转成base64后会不会还有跨域问题.说干就干! 首先在网上找到了如何将网络图片转成base64的方法(搬砖使我快乐), getBase6

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

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑. 那么问题来了,我们的网页不

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

在CSS内选择要修改的input input[type=checkbox]:disabled{ //input类型等于复选框并且是disabled状态的所有(根据情况自由指定) -webkit-appearance: none; // height: 13px; //要显示的背景图的宽 vertical-align: middle; width: 13px; //要显示背景图的高 background: url("/Public/AccountantOperate/img/onlinebanki

IE6下 input 背景图滚动问题

ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300px; background:url(%E7%BB%83%E4%B9%A0%E8%A1%A8%E6%A0%BC/mon.jpg) no-repeat; background-color:#fcf; border:1px solid #069; } .box input{height:20px; width:30

css给未知宽高的元素添加背景图片

给页面的某一元素添加背景图片,当没有指定具体的宽高时,是无法显示效果的 1.添加背景图 HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,mi

几种基本样式，背景图，字体，下划线，行高垂直等

<div style=:width:600px; heiget:600px; background-color:...; background-image; background-repea:...; background-position; 宽度高度背景颜色背景图片背景图平铺背景图位置 background-attach