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. 【转载】C# 获取系统时间及时间格式

    https://www.cnblogs.com/xjtrab/articles/1878353.html

  2. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Tomcat7基于redis的session共享

    一,项目需求 因开发人员在登录后台时需要反复认证,tomcat反复切换,所以给运维组提出需求,解决session共享问题. 二,解决方法 环境:基于Centos6.8 Jdk 版本   java ve ...

  4. websocket和socketio的总结

    1.WebSocket是什么? WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术.它是HTML最新标准HTML5的一个协议规范,本质上是个基于TCP的协议,它通过HTTP/HTTP ...

  5. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  6. 【译】第七篇 SQL Server安全跨数据库所有权链接

    本篇文章是SQL Server安全系列的第七篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...

  7. linux 如何保持兼容性

    参考链接:   https://www.cnblogs.com/MYSQLZOUQI/p/5383594.html

  8. 利用gcc的__attribute__编译属性section子项构建初始化函数表

    参考链接 :    https://my.oschina.net/u/180497/blog/177206

  9. linux 不允许多线程共享sqlite句柄

    参考链接: http://blog.csdn.net/liangzhao_jay/article/details/45642085 sqlite3采用文件锁,效率过低. sqlite3采用的3种线程模 ...

  10. Linux中find命令的用法汇总

    Linux中find命令的用法汇总 https://www.jb51.net/article/108198.htm