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)和场 ...
随机推荐
- 039、Data Volume 之 bind mount （2019-02-28 周四）
参考https://www.cnblogs.com/CloudMan6/p/7142150.html Date Volume 本质上是Dokcer host文件系统中的目录或者文件,能够直接被 ...
- 服务器部署全程记录（centos6.5）
1.安装nginx 上传安装包:put E:\yz_index\installPackage\nginx-1.14.0.tar.gz 解压:tar zxvf nginx-1.14.0.tar.gz 切 ...
- for each循环（增强for循环）
底层实现是使用了迭代器,简化了迭代器的书写 格式: for(集合/数组的数据类型 变量名: 数组名/集合名) { // body } char[] chars = {'c', 'd', 'd', 'e ...
- maven项目配置框架
任何一个maven项目都会继承一个默认的父pom配置:Super POM,详见:https://maven.apache.org/guides/introduction/introduction-to ...
- Web服务调试可用，发布之后访问出错
今天重装了系统,然后发现之前的Web服务DataService不能用了.将其设置为启动项,运行的结果是 跟踪发现,是mysql.data.dll的版本不对.所以要找到所有版本不对的该dll,将其替换成 ...
- 数据建模工具系列 之 让SQL Power Architect支持Vertica
几款数据建模软件评估 下面是流行几款数据建模软件: 软件 特点 支持Vertica? 免费? ERWin 功能强大, 操作较繁琐 不支持Vertica 商业软件,价格高 Power Designer ...
- MySQL随记(二)
第一范式(1NF First Normal Format): 1. 列具有原子性(atomic) 原子(atom)是物质的最小单元, 它不能被再分割为更小的元素. 2. 表具有主键(Primary K ...
- DevExpress 之 GridControl 自定义列
Ø 前言 DevExpress 控件大家应该都有所了解,使用这个框架实现B/S或C/S的,都是非常出色的.本文主要讨论下 GridControl 中如何[自定义列]或[计算列],可使用以下两种方法实 ...
- [译]在vuejs中使用任意js库
原文 全局变量 最naive的办法是通过附加类库到window对象,使之成为全局变量: entry.js window._ = require('lodash'); MyComponent.vue e ...
- MYSQL ERROR 1045 (28000) Access denied for user (using password YES)问题的解决
我的Linux是Centos6.7的版本,本机上Mysql突然怎么连接都进不去 报错:MYSQL ERROR 1045 (28000) Access denied for user (using pa ...