HTML网页背景图很长要有滚动条滑动
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网页背景图很长要有滚动条滑动的更多相关文章
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- css为网页顶部和底部都加入背景图
网页背景图是我们常用的功能,一般来说.给网页加一个背景图,只要在网页的body标签中加入css属性就行. 代码如下:<body style="background-image:url( ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...
- 网页图片提取助手(支持背景图、选择dom范围)
网页图片提取助手(支持背景图.选择dom范围) 网页图片下载工具.网页图片批量保存. 使用场景: 作为web前端开发首——学习小生的你我,仿学在线页面是常有的事,但是一些在线资源,比如图片,图片有im ...
- 给inpu加背景图,input内容又不能盖着背景图
问题: 根据需要,给input添加背景图片,又需要点击input及input的这个背景触发事件,但是给input输入内容多时,会覆盖此背景(如下图), 图中,java人员使用插件省市区三级联动,需要i ...
- 网页细分图结果分析(Web Page Diagnostics)
Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...
随机推荐
- impala系列:impala特有的操作符
--=======================Impala 特有的操作符--=======================ILIKE 操作符, 忽略大小写的 like 操作符.REGEXP 操作符 ...
- build script和all projects作用和区别
buildscript中的声明是gradle脚本自身需要使用的资源.可以声明的资源包括依赖项.第三方插件.maven仓库地址等.而在build.gradle文件中直接声明的依赖项.仓库地址等信息是项目 ...
- JDK8新特性01 Lambda表达式01_设计的由来
1.java bean public class Employee { private int id; private String name; private int age; private do ...
- getnameinfo函数
一.函数原型 #include <netdb.h> int getnamefo(const struct sockaddr *sockaddr, socklen_t addrlen, ch ...
- Spring使用事务增加的注解实现方
以下是我的文件结构 步骤1:配置数据源 <bean id="datasource" class="com.mchange.v2.c3p0.ComboPooledDa ...
- 20155324 《Java程序设计》实验一 Java开发环境的熟悉(Windws + IDEA)实验报告
20155324 <Java程序设计>实验一 Java开发环境的熟悉(Windws + IDEA)实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA 编辑. ...
- group by having 判断重复的有几条数据
判断字段id和字段zhi重复的条数 group by 和having 解释:前提必须了解sql语言中一种特殊的函数:聚合函数,--例如SUM, COUNT, MAX, AVG等.这些函数和其它函数的根 ...
- mybatis的两个核心对象SqlSessionFactory和SqlSession对象
mybatis的两个核心对象SqlSessionFactory和SqlSession对象 参见:https://www.cnblogs.com/wxdestiny/p/9743686.html
- Linux之Ubuntu下安装屏幕录像软件(SimpleScreenRecorder)【摘抄】
本博文全文属于摘抄自: (见文末处参考文献)(由于担心原博文丢失,以后查找不到,故此原文摘抄,以备日后多次查阅) 在日常工作中,有时需要对屏幕进行录像,以制作讲解文档等.下面介绍在Linux上安装屏幕 ...
- 迅为-IMX6开发板十层PCB制造,24小时开机测试,满负荷测试运行俩天,没有死机
迅为-IMX6开发板——工业主板的优势 1.元器件 IMX6工业主板选料,选用经过长时间.高要求验证元器件,保证产品在复杂条件下,耐高温.抗潮湿等工业场合的需求. 2.PCB设计 IMX6工业主板采用 ...