h5页⾯背景图很长要有滚动条滑动效果的实现
最近做项⽬过程中，⽼⼤提了个很奇葩的要求
背景图铺满页⾯，他要求有滚动条可以滑动，他给我讲的思路是⽤js 获取背景图⽚的⾼，在获取当前窗⼝的⾼，两者⽐较，当窗⼝的⾼⼩于背景图⽚的⾼，把窗⼝的⾼设置成背景颜⾊的⾼。反之就是窗⼝的⾼。感觉太⿇烦，⽤css就可以实现他的要求
<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;html滚动效果代码
}
#btn{
margin-top: 150px;
text-align: center;
}
</style>
<body>
<div id="btn">
<a href=" wwwblogs/fanbi">
<img src="./images/download_btn.png" width="90%" alt="跳转到某个⽹页地址"/></a>
</div>
</body>
</html>
这是⽹上的代码。
我改动了下
body{
background: -webkit-linear-gradient(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页⾯背景图滚动条滑动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。