这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题;

本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写

群友提供了一个办

 html,body{height:100%;}
*{padding: 0;margin:0;}
.index-all{width: 100%;height:100%;background-size:contain; background: url(img/weihui-a.jpg)center center no-repeat;}
<body>
<div class="index-all" id="navigation"></div>
</body>

确实管用!

但是在我这并没有鸟用!

<div class="setup-bg">
<img class="setup-img" src="img/setup_bg.png" width="100%" width="100%">
sss
</div>
.setup .setup-bg{ position: relative;height: %;}
.setup .setup-img{ position: absolute;top: ;left: ;z-index: -;}

最后解决了,目前还没发现什么问题

背景图height:100%显示的更多相关文章

  1. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  2. input与button按钮背景图失效不显示的解决办法

    今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...

  3. background-size做自适应的背景图

    background-size做自适应的背景图 在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸,在像元素加入背景的时候发现背景图片的原始尺寸很大,当我把背景图写入时往往超过元素很大一 ...

  4. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

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

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

  6. html-css控制背景图全屏拉伸不重复显示

    在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...

  7. html始终让元素居中显示,背景图铺满随便拖动不出界

    首先.写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Cont ...

  8. CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  9. 微信小程序开发--背景图显示

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image ...

随机推荐

  1. Cannot call sendError() after the response has been committed - baiyangliu - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. php学习记录

    放了寒假.期末考试折腾了一个月都不会写代码了. 一放寒假就找了套PHP培训的课程 在这做些笔记,系统的学习一下php 2017.1.14 介绍集成环境---wamp Apache服务器根目录 / -- ...

  3. Redis详细介绍

    转自:http://blog.csdn.net/eroswang/article/details/7080412 1.介绍 1.1 Redis是什么 REmote DIctionary Server( ...

  4. js的this作用域

    作者:zccst this作用域以前专门学习研究过,但发现依然不够全面和完整.现在继续学习 先列出之前看过的结论: 函数在被调用的时候会意外接受两个参数:this和argument,其中this的值跟 ...

  5. FZU 1058 粗心的物理学家

    这题有毒.要用long double定义,以及cout控制格式输出. #include<cstdio> #include<cstring> #include<cmath& ...

  6. Java 之 HTML

    1.HTML a.定义:HTML指的是超文本标记语言 b.特点:HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 HTML使用标记标签来描述网页 c.HTML标签:①通常标签是成对出 ...

  7. C++的封装性

    C++的封装性 C++的阶段,我想根据C++的一些特有的特性分别写一些专题,每个专题我都捎带讲一些语法,当然不会很多,我还是会像C语言那样,内存结构贯穿始终,有汇编就有真相…… 本专题,我们讲述封装性 ...

  8. ubuntu内核的编译安装

    原创声明:转载请注明出处. 一.操作环境: 1.ubuntu版本 2.linux原有内核版本 3.要安装的linux内核版本 linux-3.16.39 二.新内核的编译和安装 1.首先下载linux ...

  9. 笔记整理--玩转robots协议

    玩转robots协议 -- 其他 -- IT技术博客大学习 -- 共学习 共进步! - Google Chrome (2013/7/14 20:24:07) 玩转robots协议 2013年2月8日北 ...

  10. PHP 魔术变量和魔术函数详解

    魔术变量 PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们的 ...