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. [Android] Android 使用 Greendao 操作 db sqlite

    Android 使用 Greendao 操作 db sqlite GreenDAO是一个开源的安卓ORM框架,能够使SQLite数据库的开发再次变得有趣.它减轻开发人员处理低级数据库需求,同时节省开发 ...

  2. Linux查看版本信息

    查看Linux版本以及是32位还是64位 查看版本 一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@S-CentOS home]# cat /proc ...

  3. Java SE之调整JVM内存笔记

    [文档整理系列]  Java SE之调整JVM内存笔记 一般JVM内存限制是64Mbyte Eclipse下 Run as configrationArguments选项:-Xmx80m [设置虚拟机 ...

  4. DAO层设计

    一.类图分析 二.参考文档 ( JavaBean中DAO设计模式介绍)(附:设计源码) 三.类图设计文件 百度云盘:https://pan.baidu.com/s/1i5xaS8P[Power Des ...

  5. centos 查找命令的可用包/命令属于哪个软件包

    centos 查找命令的可用包 yum provides */commond 例如: yum provides */lsb_release

  6. Kaldi的nnet3

    Nnet3配置中的上下文和块大小 简介 本页讨论了nnet3配置中关于解码和训练的块大小以及左右上下文的某些术语.这将有助于理解一些脚本.目前,从脚本角度来看,没有任何关于nnet3的"概述 ...

  7. mysql 分库分表 ~ 方案选择浅谈

    一 简介:分库分表的理解二 具体: 1 当由于单台DB业务增长导致的服务器压力时,就必须横向进行扩展              2 本文仅从中间层观点进行分析三 现有方案  方案1 sharding家 ...

  8. 海洋cms v6.53 v6.54版本漏洞复现

    海洋cms v6.53 v6.54版本漏洞复现 参考链接: 今天发现freebuf上一篇海洋cms的漏洞,来复现一下. http://www.freebuf.com/vuls/150042.html ...

  9. DeepLearning.ai-Week1-Convolution+model+-+Step+by+Step

    1 - Import Packages import numpy as np import h5py import math import matplotlib.pyplot as plt %matp ...

  10. linux 日志管理