HTML网页背景图很长要有滚动条滑动
1 前言
由于网页背景图非常长，然后会出现只显示当前页面，后面部分看不到，也不能滑动，开始以为不能滑动应该是没有加overflow-y: auto(scroll)，结果加上去也是无效的。
2 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>长背景图测试/title>
<style type="text/css">
//body里面的属性min-height是关键，网上说直接设置成100vh即可，如果不可以可以自己微调
body{
background:url(./images/download_bg.png) no-repeat;
background-size:100%;
//方案1
min-height: 185vh;
//方案2，本质等价于方案一,如果两个方案是同时开启，则会使用高度更小的那个，已测试
//height:1200px;
} #btn{
margin-top: 150px;
text-align: center;
} </style>
<body> <div id="btn">
<a href=" http://www.cnblogs.com/fanbi">
<img src="./images/download_btn.png" width="90%" alt="跳转到某个网页地址"/></a>
</div> </body>
</html>
3 小结
仅作为记录，如果能帮到看到此篇文章的你，那就更好了。
HTML网页背景图很长要有滚动条滑动的更多相关文章
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
- 前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- css为网页顶部和底部都加入背景图
网页背景图是我们常用的功能,一般来说.给网页加一个背景图,只要在网页的body标签中加入css属性就行. 代码如下:<body style="background-image:url( ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...
- 网页图片提取助手(支持背景图、选择dom范围)
网页图片提取助手(支持背景图.选择dom范围) 网页图片下载工具.网页图片批量保存. 使用场景: 作为web前端开发首——学习小生的你我,仿学在线页面是常有的事,但是一些在线资源,比如图片,图片有im ...
- 给inpu加背景图,input内容又不能盖着背景图
问题: 根据需要,给input添加背景图片,又需要点击input及input的这个背景触发事件,但是给input输入内容多时,会覆盖此背景(如下图), 图中,java人员使用插件省市区三级联动,需要i ...
- 网页细分图结果分析（Web Page Diagnostics）
Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...
随机推荐
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- php下curl ssl常用问题
1. 查看curl版本 在phpinfo中,可以查看 curl cURL support enabled cURL Information 7.35.0 Age 3 Features AsynchDN ...
- 将.csv数据导入到mysql中
1.首先看一下我需要导入的数据: 用excel打开的时候显示: 用notepad++打开显示为: 2.使用notepad++打开改变字符集为UTF-8 3,建立表,表中的字段要和文件中的一致 3.执行 ...
- node.js 环境
Centos 7.2 安装 Node.js 环境 Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 引擎建立的平台. 1. Node.js w ...
- Debian Security Advisory(Debian安全报告) DSA-4403-1 php7.0
Package : php7.0 CVE ID : 还未申请 在广泛使用的开放源码通用脚本语言PHP中发现了多个安全问题:EXIF扩展存在多个无效内存访问的情况,并且发现 ...
- Linux之备份(tar)/解压与压缩（gzip,bzip2,xz）【待完善】
[本博文,待完善] 以data原始文件为例,同tar备份,用xz压缩,实现备份->压缩整个过程的正向过程(生成.tar.xz)与其逆过程(先解压,后还原备份文件) 1.备份(tar) tar - ...
- 微信小程序之内嵌网页(webview)
设置权限 要在小程序中访问外部网页,需要先设置允许访问的业务网站的域名.让我们先登录小程序平台管理后台页面,进入“设置” => "开发设置",可以看到这边多出来了一块“业务域 ...
- Linux C++ TCP Socket传输文件或图片实例
环境:Linux 语言:C++ 通信方式:TCP 下面用TCP协议编写一个简单的服务器.客户端,其中服务器端一直监听本机的6666号端口.如果收到连接请求,将接收请求并接收客户端发来的消息:客户端与服 ...
- hadoop-1.2.1集群搭建
继续上一篇:http://www.cnblogs.com/CoolJayson/p/7430654.html 首先需要安装上台虚拟机, 分别为: master, salve1, slave2 1.复制 ...
- ListBox滚动条 刷新列表之后 指定位置(置顶或滚动到最后)
参数ObservableCollection<T>类型 滚动条在最上 ListBox.ScrollIntoView(ListBoxOC[0]);滚动条在最下 ListBox.ScrollI ...