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. python模块之自定义模块

    模块概述 到此之前,我们都是在一个py文件里操作,接下来,我们学习模块的内容,可以从其他文件引入内容(如函数等) 1. 什么是模块 一个py文件就是一个模块,模块是一些相似功能的集合体 2. 为什么要 ...

  2. Jenkins和pipeline

    Jenkins https://jenkins.io/index.html The leading open source automation server, Jenkins provides hu ...

  3. HDB3 译码器

    一.HDB3译码方案一: 插入V/B的情况是有两种,两个或三个零两端同极性,也就是要把代码二进制表示的“+1 0 0 0 +1”或“-1 0 0 0 -1”变成“1 0 0 0”,把“+1 0 0 + ...

  4. Rem自适应js---flexible.min.js

    网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...

  5. Got error 28 from storage engine 解决方法

    早上一来,jira点击任何页面都会报错,首先查看服务器的日志 然后服务器首先看了磁盘,果不其然,是根目录的磁盘满了, 然后就一层一层找占用最大的文件 命令: cd /usr du -sh * 找到了文 ...

  6. 实现两线程的同步二（lockSupport的park/unpark）

    1.使用LockSupport的part/unpark实现 package com.ares.thread; import java.util.concurrent.locks.LockSupport ...

  7. JQuery常见事件

    ##### 事件 onclick 单机事件 ondblclick 双击事件 onmouseover 鼠标穿过 (子盒子独立) onmouseout 鼠标出去 onmouseenter 鼠标进入 (子盒 ...

  8. 允许长单词、数字、URL换行到下一行

    CSS3 word-wrap 属性 normal 只在允许的断字点换行(浏览器保持默认处理) break-word 在长单词.数字.URL地址内部进行换行 页面效果图: 源码:

  9. Python 16 html 基础 jQuery & Javascript研究

    基础内容 DOM操作 javascript探讨 JQuery初识 DOM innerText  ==>获取仅文本 innerHtml  ==>获取全部内容 <div id=" ...

  10. Python概念(八)字符串格式化:%和.format

    https://www.cnblogs.com/nulige/p/6115793.html