h5页面背景图很长要有滚动条滑动效果实现代码
作者：袖梨
2021-02-01
本篇文章小编给大家分享一下h5页面背景图很长要有滚动条滑动效果实现代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
背景图铺满页面，要求有滚动条可以滑动，思路是用js获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片的高，把窗口的高设置成背景颜色的高。反之就是窗口的高。
长背景图测试/title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
//body里面的属性min-height是关键，网上说直接设置成100vh即可，如果不可以可以自己微调
body{
background:url(./images/download_bg.png) no-repeat;
background-size:100%;
//方案1
min-height: 185vh;
//方案2，本质等价于方案一,如果两个方案是同时开启，则会使用高度更小的那个，已测试
//
}
#btn{
margin-top: 150px;
text-align: center;
}
</style>
<body>
<div id="btn">
<a href=" http://www.cnblogs.com/fanbi">
<a href="./images/download_btn.png" class="js-smartPhoto" target="_blank"><img src="./images/download_btn.png" width="90%" alt="跳转到某个网页地址"/></a></a>
</div>
</body>
</html></pre>
<p>
这是网上的代码。
</p>
<p>
改动了下
</p>
<pre class="brush:xhtml;">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%;
/* */
min-height: 120vh;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
background: url('../../images/bg.jpg') no-repeat;
background-size: 100% auto;
}</pre>
<p>
给body加了个跟图片颜色一样的背景色
</p>
</div>
</div>
</section>
<div class="wrap-box">
<div class="turnPage wrapStyle">
<a href="https://m.111com.net/art-195669.htm">上一个：<span>在HTML中限制input输入框只能输入纯数字实现代码</span></a>
<a href="https://m.111com.net/art-195770.htm">下一个：<span>css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果代码</span></a>
</div>
</div>
<section class="wrap-box">
<div class="g-tit">
<h2>相关文章</h2>
</div>
<ul class="s-list nobord notop">
<li>
<a href="https://m.111com.net/art-228472.htm" class="s-card">
<div class="s-card-l">
<p class="tit">HTML简单购物数量小程序代码展示</p>
<div class="info">
<span class="person">html5教程</span>
<span class="time">2022-10-31</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://m.111com.net/art-228464.htm" class="s-card">
<div class="s-card-l">
<p class="tit">html canvas实现弹幕功能</p>
<div class="info">
<span class="person">html5教程</span>
<span class="time">2022-10-31</span>
</div>
</div>
<div class="s-card-pic">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/7a/2e/958ae89e848fc8c7c37e0cd93d1ddf83_c_246_164.gif" alt="html canvas实现弹幕功能" />
</div>
</a>
</li>
<li>
<a href="https://m.111com.net/art-228463.htm" class="s-card">
<div class="s-card-l">
<p class="tit">HTML中空格表示的意义</p>
<div class="info">
<span class="person">html5教程</span>
<span class="time">2022-10-31</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://m.111com.net/art-228462.htm" class="s-card">
<div class="s-card-l">
<p class="tit">html area标签解读</p>
<div class="info">
<span class="person">html5教程</span>
<span class="time">2022-10-31</span>
</div>
</div>
<div class="s-card-pic">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/cb/62/2cb1a4fa41104ed71ef069688f3411a2_c_246_164.png" alt="html area标签解读" />
</div>
</a>
</li>
<li>
<a href="https://m.111com.net/art-228461.htm" class="s-card">
<div class="s-card-l">
<p class="tit">html使用表单标签实现注册页面代码展示</p>
<div class="info">
<span class="person">html5教程</span>
<span class="time">2022-10-31</span>
</div>
</div>
</a>
</li>
<li>
<a href="https://m.111com.net/art-228460.htm" class="s-card">
<div class="s-card-l">
<p class="tit">使用HTML截图并保存为本地图片的代码展示</p>
<div class="info">
<span class="person">html5教程</span>
<span class="time">2022-10-31</span>
</div>
</div>
</a>
</li>
</ul>
</section>
<section class="wrap-box">
<div class="g-tit">
<h2>精彩推荐</h2>
</div>
<ul class="card-box">
<li class="card3">
<a href="https://m.111com.net/azgame/46853.htm" target="_self" class="figure">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/46853/5dcb71bae30a3.png" alt="一剑斩仙" />
</div>
<p class="figure-head">一剑斩仙</p>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card3">
<a href="https://m.111com.net/azgame/224592.htm" target="_self" class="figure">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/77/b7/b0a10d2c1b09f241dabff441346fb91c.png" alt="超级雷电战机" />
</div>
<p class="figure-head">超级雷电战机</p>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card3">
<a href="https://m.111com.net/azgame/30153.htm" target="_self" class="figure">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/30153/6d482cbc24.jpg" alt="烈火一刀" />
</div>
<p class="figure-head">烈火一刀</p>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card3">
<a href="https://m.111com.net/azgame/42147.htm" target="_self" class="figure">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/42147/5d4cf5dfeb6ca.png" alt="天使纪元" />
</div>
<p class="figure-head">天使纪元</p>
<span class="figure-btn">下载</span>
</a>
</li>
</ul>
<ul class="card-box-b">
<li class="card10">
<a href="https://m.111com.net/azgame/127872.htm" target="_self" class="figure2">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/mobile/202111/15/35c0b8587a.png" alt="完美修真" />
</div>
<div class="figure-cont">
<p class="figure-head">完美修真</p>
<div class="figure-desc">
<span>角色扮演</span>
<span>538.52 MB</span>
</div>
<div class="figure-desc">
<p>高清画质体验，华丽场景视觉盛宴</p>
</div>
</div>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card10">
<a href="https://m.111com.net/azgame/30904.htm" target="_self" class="figure2">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/attachment/m_soft/30904/fd82743d5b.png" alt="永恒领主" />
</div>
<div class="figure-cont">
<p class="figure-head">永恒领主</p>
<div class="figure-desc">
<span>即时网游</span>
<span>392.00 MB</span>
</div>
<div class="figure-desc">
<p>3D魔幻MMO</p>
</div>
</div>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card10">
<a href="https://m.111com.net/azgame/113807.htm" target="_self" class="figure2">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/mobile/202107/01/275a3dca7e.png" alt="九州八荒录" />
</div>
<div class="figure-cont">
<p class="figure-head">九州八荒录</p>
<div class="figure-desc">
<span>角色扮演</span>
<span>232.56 MB</span>
</div>
<div class="figure-desc">
<p>九州八荒，一剑入魂。</p>
</div>
</div>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card10">
<a href="https://m.111com.net/azgame/372634.htm" target="_self" class="figure2">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/f5/99/f276753f2f8beb9dd0cceb843afcf723.png" alt="航海王燃烧意志" />
</div>
<div class="figure-cont">
<p class="figure-head">航海王燃烧意志</p>
<div class="figure-desc">
<span>角色扮演</span>
<span>1.57 GB</span>
</div>
<div class="figure-desc">
<p>热血激战动作冒险游戏</p>
</div>
</div>
<span class="figure-btn">下载</span>
</a>
</li>
<li class="card10">
<a href="https://m.111com.net/azgame/37526.htm" target="_self" class="figure2">
<div class="figure-box">
<img src="https://assets.111com.net/images/lazy.gif" data-src="https://img.111com.net/m00/f3/6a/29dc4894964b32d77cad35e9676985d4.png" alt="君临传奇" />
</div>
<div class="figure-cont">
<p class="figure-head">君临传奇</p>
<div class="figure-desc">
<span>角色扮演</span>
<span>43.57 MB</span>
</div>
<div class="figure-desc">
<p>经典RPG战斗手游</p>
</div>
</div>
<span class="figure-btn">下载</span>
</a>
</li>
</ul>
</section>
<footer class="foot">
<a href="https://m.111com.net/" class="logo-icon">
<img src="https://assets.111com.net/mobile/images/logo2.png" alt="一聚教程网">
</a>
<p>Copyright © 2010-2024</p>
<p>111com.net All Rights Reserved</p>
</footer>
<div class="back-top" style="display: block;">
<span class="icon-box"><svg class="icon" viewBox="0 0 1024 1024">
<path
d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z"
fill="#0374f3">
</path>
</svg>
</span>
</div>
<script src="https://api.111com.net/api/stat/hits?type=article&id=195719"></script>
</div>
<script src="https://assets.111com.net/js/stat.js?v=2024022101"></script>
</body>
</html>