最近做项目 过程中 ，老大提了个很奇葩的要求
背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片的高，把窗口的高设置成 背景颜色 的高。反之就是窗口的高。 感觉太麻烦，用css就可以实现他的要求
<ht ML >
<head>
< ;m eta http-equiv="Content -t y PE " content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE= Edge ">
<meta n am e="viewport" content="width=device-width,in IT ial -s cale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple- mobile -web-app-capable" content="yes">
<meta name="apple-mobile-web-app- stat us-bar-style" content="black">
<meta name="format- detect ion" content="telephone=no">
<title>长背景图测试/title>
<style type="text/css">
//body里面的属性min-h ei ght是关键，网上说直接设置成100vh即可，如果不可以可以自己微调
body{
background:url(./images/download_bg.png) no-repeat;
background-size :100%;
// 方案 1
min-height: 185vh;
//方案2，本质等价于方案一,如果两个方案是同时开启，则会使用高度更小的那个，已测试
//height:1200px;
}
# BT n{
m arg in-top: 150px;
text-align: center ;
}
</style>
<body>
<div id="btn">
<a hr ef=" http://HdhCmsTestcn blog s .COM / fan bi">
< img src="./images/download_btn.png" width="90%" alt="跳转到某个网页地址"/></a>
</div>
</body>
</html>
这是网上找的代码。
我改动了下
body{
background: - webkit -linear-gra die nt(to bottom , #699eef, #8e92ef);
background: -o-linear-gradient(to bottom , #699eef, #8e92ef);
background: -moz-linear-gradient(to bottom , #699eef, #8e92ef);
background: linear-gradient(to bottom , #699eef, #8e92ef);
}
.app {
width: 100%;
/* height:900px; */
min-height: 120vh;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
background: url(' .. /images/bg. jpg ') no-repeat;
background- Size: 100% auto;
}
给body加了个跟图片颜色一样的背景色
解决问题。
到此这篇关于h5页面背景图很长要有滚动条滑动效果的实现的 文章 就介绍到这了,更多相关 HTML5页面 背景图滚动条滑动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 h5页面背景图很长要有滚动条滑动效果的实现 全部内容，希望文章能够帮你解决 h5页面背景图很长要有滚动条滑动效果的实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于h5页面背景图很长要有滚动条滑动效果的实现的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did211555