H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法
方法1:
<style>
body{
background:url(beijingtu.gif) top left;
background-size:100%;
}
</style>
方法二:
<body>
<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="beijingtu.gif" height="100%" width="100%"/>
</div>
</body>
方法三:
先使用一个style标签
<style>
.background_img{
background:url("beijingtu.gif") no-repeat;
background-size: 100%; //这一设置把图片铺满整个背景
}
</style>
然后在body里使用
<body class="background_img"> 网页内容 </body>
H5 背景图片自适应屏幕问题解决办法的更多相关文章
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- 关于iphone 6 ios8网站背景图片错乱的问题解决办法
最近公司有个客户的网站用手机safari打开出现背景图片错乱,本来应该显示A图片的却显示B图片,网速越慢的情况下越容易出现这种问题,悲催的是这种情况只在iPhone 6上出现,并且不是一直这样,多刷新 ...
- css -- 背景图片自适应屏幕大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- 基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览 源码下载 实现的代码. css代码: .jawbone-hero .jaw ...
- background--详解(背景图片根据屏幕的自适应)
background:有以下几种属性: background-color background-position background-size background-repeat backgroun ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
随机推荐
- IT兄弟连 Java语法教程 流程控制语句 循环结构语句2
双重for循环 如果把一个循环放在另一个循环体中,那么就可以形成嵌套循环,也就是双重for循环,当然嵌套循环也可以是for循环嵌套while循环,也可以是while循环嵌套while循环……,即各种类 ...
- c#汉字转拼音首字母全拼支持多音字
1.首先在NuGet安装pingyinConverter 2.下载-安装-引用ChineseChar.dll到项目中 官网了解:http://www.microsoft.com/zh-cn/downl ...
- Java开发桌面程序学习(七)——ImageView设置图片以及jar包读取fxml文件
ImageView设置图片 JavaFx的ImageView,设置图片不能直接通过属性设置,只能通过代码来设置 ImageView设置图片 首先,我们让fxml对应的那个controller的java ...
- PHP常量以及基本数据类型
1.常量 1.1用define()函数定义常量 define(常量名,值,[是否区别大小写]) true表示不区分大小写,默认是false 常量名前没有$符 常量名推荐使用大写 1.2.定义 ...
- PLC与外接按钮开关接线方法图解
一个电机控制电路如图1所示,电路中使用常开按钮启动电机,用常闭按钮停止电机运行,图1中KM是控制电机电源的继电器.这样的电路若是使用PLC时的外接线图如图2所示.同时为使PLC运行,在PLC中输入由图 ...
- JS基本语法---while循环
循环:一件事不停的或者是重复的做 循环要有结束的条件,循环还应该有计数器(记录循环的次数的) while循环 while循环语法: 计数器 var 变量=0; while(循环的条件){ ...
- CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)
首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...
- SAP MM 公司间STO发货单输出报错 - 合并工厂AUC1和存储位置6002没有货物收货地点 - 之对策
SAP MM 公司间STO发货单输出报错 - 合并工厂AUC1和存储位置6002没有货物收货地点 - 之对策 昨天收到客户业务部门报错,说是业务对交货单0080022298做POD失败.相关交货单的输 ...
- ABP进阶教程10 - PDF导出中文乱码
点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出PDF,中文信息导出为乱码. 解决方案 导出PDF是通过pdfmake.js实现的. 检查发现是pdfmake引用的vfs_fonts.js字 ...
- [b0019] python 归纳 (五)_类装饰器
总结: 类装饰器, 本质是一个函数,输入一个类,返回一个类 Case 1 啥都没做 def deco(in_class): return in_class @deco class Cat: def _ ...