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网页背景图很长要有滚动条滑动的更多相关文章

  1. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

  2. 前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  3. css为网页顶部和底部都加入背景图

    网页背景图是我们常用的功能,一般来说.给网页加一个背景图,只要在网页的body标签中加入css属性就行. 代码如下:<body style="background-image:url( ...

  4. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  5. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

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

    近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...

  7. 网页图片提取助手(支持背景图、选择dom范围)

    网页图片提取助手(支持背景图.选择dom范围) 网页图片下载工具.网页图片批量保存. 使用场景: 作为web前端开发首——学习小生的你我,仿学在线页面是常有的事,但是一些在线资源,比如图片,图片有im ...

  8. 给inpu加背景图,input内容又不能盖着背景图

    问题: 根据需要,给input添加背景图片,又需要点击input及input的这个背景触发事件,但是给input输入内容多时,会覆盖此背景(如下图), 图中,java人员使用插件省市区三级联动,需要i ...

  9. 网页细分图结果分析（Web Page Diagnostics）

    Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...

随机推荐

  1. java.lang.String & java.lang.StringBuilder

    java.lang.String & java.lang.StringBuilder String 成员方法 作用 public charAr(int index) 返回给定位置的代码单元 p ...

  2. Bitcoin Core钱包客户端的区块数据搬家指南

    最近在饭团(微信中的一个服务号)里教一些朋友学习比特币和区块链技术,为了让大家深刻地理解去中心化网络和钱包等概念,我推荐大家一定要安装经典的Bitcoin Core钱包软件,有些朋友在安装的时候没有留 ...

  3. 细说shiro之五：在spring框架中集成shiro

    官网:https://shiro.apache.org/ 1. 下载在Maven项目中的依赖配置如下: <!-- shiro配置 --> <dependency> <gr ...

  4. 解决XP系统任务管理器显示不全

    我们在使用电脑的时候有的时候打开任务管理器会发现任务管理器显示不全. 当碰到这种情况怎么解决呢?任务管理器显示不全的原因又是那些呢? 这里就来为大家分享下为什么任务管理器会显示不全以及如何解决这个问题 ...

  5. [译]Debug ASP.NET Core 2.0源代码

    原文 首先你的VS必须为VS 2017 15.3或以上版本. 打开你的Startup类,在ConfigureServices方法上设置个断点,按F5 Debug应用. 在Call Stack(调用堆栈 ...

  6. iOS: 并发编程的几个知识点

    iOS 多线程问题 查阅的大部分资料都是英文的,整理完毕之后,想翻译成中文,却发现很多名字翻译成中文很难表述清楚. 所以直接把整理好的资料发出来,大家就当顺便学习学习英语. 1. Thread Saf ...

  7. Docker（五）如何构建Dockerfile

    摘自 https://mp.weixin.qq.com/s/_hq9dPe6390htN8BTkoQeQ 一.Dockerfile的指令集 由于Dockerfile中所有的命令都是以下格式:INSTR ...

  8. 手动写Entity Framework 数据库上下文和Model实体

    1.引用EF对应的程序集 使用命令安装EntityFramework包Install-Package EntityFramework Entity Framework简单目录: 1.context数据 ...

  9. CTF 湖湘杯 2018 WriteUp (部分)

    湖湘杯 2018 WriteUp (部分),欢迎转载,转载请注明出处! 1.  CodeCheck(WEB) 测试admin ‘ or ‘1’=’1’# ,php报错.点击登录框下面的滚动通知,URL ...

  10. 基于TensorFlow Object Detection API进行相关开发的步骤

    *以下二/三.四步骤确保你当前的文件目录是以research文件夹为相对目录. 一/安装或升级protoc 查看protoc版本命令: protoc --version 如果发现版本低于2.6.0或运 ...