1 前言

由于网页背景图非常长，然后会出现只显示当前页面，后面部分看不到，也不能滑动，开始以为不能滑动应该是没有加overflow-y: auto(scroll)，结果加上去也是无效的。

2 代码

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <meta name="format-detection" content="telephone=no">
  9. <title>长背景图测试/title>
  10. <style type="text/css">
  11.         //body里面的属性min-height是关键，网上说直接设置成100vh即可，如果不可以可以自己微调
  12. 	body{
  13. 		background:url(./images/download_bg.png) no-repeat;
  14. 		background-size:100%;
  15.                 //方案1
  16. 		min-height: 185vh;
  17.                 //方案2，本质等价于方案一,如果两个方案是同时开启，则会使用高度更小的那个，已测试
  18.                 //height:1200px;
  19. 	}
  20.  
  21. 	#btn{
  22. 		margin-top: 150px;
  23. 		text-align: center;
  24. 	}	
  25.  
  26. </style>
  27. <body>
  28.  
  29. <div id="btn">
  30. 	<a href=" http://www.cnblogs.com/fanbi">
  31. 	<img src="./images/download_btn.png" width="90%" alt="跳转到某个网页地址"/></a>
  32. </div>	
  33.  
  34. </body>
  35. </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. 058、flannel概述（2019-03-27 周三）

    参考https://www.cnblogs.com/CloudMan6/p/7412150.html   flannel 是 CentOS开发的容器网络解决方案.flannel 为每个host分配一个 ...

  2. Silverlight程序之修改命名空间

    有时候,为了使用已有的代码,可能需要更改主程序的命名空间,以生成新的应用.修改命名空间,不能胡乱一通全部使用“替换”,否则程序可能无法正常运行.通过笔者实践,主要有以下几个地方需要注意(以WebGIS ...

  3. MySQL-5.7数据库主从同步实战教程

    主从形式 MySQ主从复制原理(主库写入数据,从库读取数据) MySql常用命令: MySQL5.7设置密码 ') where user='root': MySQL5.6设置密码 ') WHERE U ...

  4. Ext.net资源地址

    nuget:https://www.nuget.org/packages/Ext.NET/4.1.0 示例:https://examples1.ext.net/#/GridPanel/WebServi ...

  5. SSH整合方案二(不带hibernate.cfg.xml)

    整体结构: 1.引入相关jar包 2.编写实体类和映射文件 package cn.zqr.domain; public class Customer { private Long cust_id; p ...

  6. HTML字体自动换行第二行缩进一格

    p {text-indent: -2em; margin-left: 2em;}设置text-indent: -2em;以后p标签中第一行文字向左偏移,这样第二行开始的文字就等于缩进了,但是这样设置会 ...

  7. [C++]PAT乙级1012.数字分类 (20/20)

    /* 1012. 数字分类 (20) 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和, ...

  8. 在PHP中使用CURL，“撩”服务器只需几行

    在PHP中使用CURL,“撩”服务器只需几行https://segmentfault.com/a/1190000006220620 七夕啦,作为开发,妹子没得撩就“撩”下服务器吧,妹子有得撩的同学那就 ...

  9. Element-ui 中dialog的使用方法

    <template> <div> <el-button type="text" @click="dialogFormVisible = tr ...

  10. mysql查询反斜杠字符串问题

    马上上线发现一个问题,太坑了 写一个查询语句,明明数据库中有,但是就是查不到,后来发现是反斜杠的问题 比如 数据库中有一个字段名称为 name  存储的值为 “海尔厨电\洗碗机” 当我使用如下sql查 ...