最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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-pc" 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 class="pages art-detail">
</div>
<ul class="TurnPage">
<li class="TurnPage-left">
<p>
<span>上一个：</span>
<a href="https://www.111com.net/wy/195669.htm" class="maxWidth">在HTML中限制input输入框只能输入纯数字实现代码</a>
</p>
</li>
<li class="TurnPage-right">
<p>
<span>下一个：</span>
<a href="https://www.111com.net/wy/195770.htm" class="maxWidth">css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果代码</a>
</p>
</li>
</ul>
<div class="articles">
<div class="tit02">
<h4>相关文章</h4>
</div>
<ul>
<li>
<a target="_blank" href="https://www.111com.net/wy/228472.htm">HTML简单购物数量小程序代码展示</a>
<span>10-31</span>
</li>
<li>
<a target="_blank" href="https://www.111com.net/wy/228464.htm">html canvas实现弹幕功能</a>
<span>10-31</span>
</li>
<li>
<a target="_blank" href="https://www.111com.net/wy/228463.htm">HTML中空格表示的意义</a>
<span>10-31</span>
</li>
<li>
<a target="_blank" href="https://www.111com.net/wy/228462.htm">html area标签解读</a>
<span>10-31</span>
</li>
<li>
<a target="_blank" href="https://www.111com.net/wy/228461.htm">html使用表单标签实现注册页面代码展示</a>
<span>10-31</span>
</li>
<li>
<a target="_blank" href="https://www.111com.net/wy/228460.htm">使用HTML截图并保存为本地图片的代码展示</a>
<span>10-31</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="hot-column">
<div class="cont">
<div class="tit">
<h4>热门栏目</h4>
</div>
<ul class="clearfix">
<li>
<h6><a href="https://www.111com.net/phper/php.html" target="_blank">php教程</a></h6>
<a href="https://www.111com.net/list-45/" target="_blank">php入门</a>
<a href="https://www.111com.net/list-46/" target="_blank">php安全</a>
<a href="https://www.111com.net/list-47/" target="_blank">php安装</a>
<a href="https://www.111com.net/list-48/" target="_blank">php常用代码</a>
<a href="https://www.111com.net/list-49/" target="_blank">php高级应用</a>
</li>
<li>
<h6><a href="https://www.111com.net/net/net.html" target="_blank">asp.net教程</a></h6>
<a href="https://www.111com.net/list-78/" target="_blank">基础入门</a>
<a href="https://www.111com.net/list-79/" target="_blank">.Net开发</a>
<a href="https://www.111com.net/list-80/" target="_blank">C语言</a>
<a href="https://www.111com.net/list-81/" target="_blank">VB.Net语言</a>
<a href="https://www.111com.net/list-82/" target="_blank">WebService</a>
</li>
<li>
<h6><a href="https://www.111com.net/sj/index.html" target="_blank">手机开发</a></h6>
<a href="https://www.111com.net/list-208/" target="_blank">安卓教程</a>
<a href="https://www.111com.net/list-209/" target="_blank">ios7教程</a>
<a href="https://www.111com.net/list-210/" target="_blank">Windows Phone</a>
<a href="https://www.111com.net/list-211/" target="_blank">Windows Mobile</a>
<a href="https://www.111com.net/list-212/" target="_blank">手机常见问题</a>
</li>
<li>
<h6><a href="https://www.111com.net/cssdiv/css.html" target="_blank">css教程</a></h6>
<a href="https://www.111com.net/list-99/" target="_blank">CSS入门</a>
<a href="https://www.111com.net/list-100/" target="_blank">常用代码</a>
<a href="https://www.111com.net/list-101/" target="_blank">经典案例</a>
<a href="https://www.111com.net/list-102/" target="_blank">样式布局</a>
<a href="https://www.111com.net/list-103/" target="_blank">高级应用</a>
</li>
<li>
<h6><a href="https://www.111com.net/wy/yw.html" target="_blank">网页制作</a></h6>
<a href="https://www.111com.net/list-136/" target="_blank">设计基础</a>
<a href="https://www.111com.net/list-137/" target="_blank">Dreamweaver</a>
<a href="https://www.111com.net/list-138/" target="_blank">Frontpage</a>
<a href="https://www.111com.net/list-139/" target="_blank">js教程</a>
<a href="https://www.111com.net/list-140/" target="_blank">XNL/XSLT</a>
</li>
<li>
<h6><a href="https://www.111com.net/office/index.html" target="_blank">办公数码</a></h6>
<a href="https://www.111com.net/list-236/" target="_blank">word</a>
<a href="https://www.111com.net/list-237/" target="_blank">excel</a>
<a href="https://www.111com.net/list-238/" target="_blank">powerpoint</a>
<a href="https://www.111com.net/list-239/" target="_blank">金山WPS</a>
<a href="https://www.111com.net/list-240/" target="_blank">电脑新手</a>
</li>
<li>
<h6><a href="https://www.111com.net/jsp/jsp.html" target="_blank">jsp教程</a></h6>
<a href="https://www.111com.net/list-68/" target="_blank">Application与Applet</a>
<a href="https://www.111com.net/list-69/" target="_blank">J2EE/EJB/服务器</a>
<a href="https://www.111com.net/list-70/" target="_blank">J2ME开发</a>
<a href="https://www.111com.net/list-71/" target="_blank">Java基础</a>
<a href="https://www.111com.net/list-72/" target="_blank">Java技巧及代码</a>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="cont">
<p>
<a href="https://www.111com.net/" target="_self">一聚教程网</a>|
<a href="https://www.111com.net/us/us.html" class="about" target="_self">关于我们</a>|
<a href="https://www.111com.net/us/me.html" class="contact" target="_self">联系我们</a>|
<a href="https://www.111com.net/us/ads.html" class="gg_contact" target="_self">广告合作</a>|
<a href="https://www.111com.net/us/link.html" class="friend_link" target="_self">友情链接</a>|
<a href="https://www.111com.net/us/bcinfo.html" class="copyright_notice" target="_self">版权声明</a>
</p>
<p>
<span>copyRight@2007-2024 www.111COM.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">苏ICP备17065847号-2</a> </span>
</p>
<p>
<span>
网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理
</span>
</p>
</div>
</div>
<script src="https://assets.111com.net/js/stat.js?v=2024022101"></script>
<script src="https://api.111com.net/api/stat/hits?type=article&id=195719"></script>
</body>
</html>