最近做项目过程中，老大提了个很奇葩的要求
背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片的高，把窗口的高设置成背景颜色的高。反之就是窗口的高。 感觉太麻烦，用css就可以实现他的要求
长背景图测试/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">
</a>
</div>
</body>
</html></pre></p>
<p>这是网上找的代码。</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%;
/* height:900px; */
min-height: 120vh;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
background: url('../../images/bg.jpg') no-repeat;
background-size: 100% auto;
}</pre></p>
<p>给body加了个跟图片颜色一样的背景色</p>
<p>解决问题。</p>
<p>到此这篇关于h5页面背景图很长要有滚动条滑动效果的实现的文章就介绍到这了,更多相关html5页面背景图滚动条滑动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！</p><p><b>网页设计全屏滚动效果怎么做？</b></p>
<p>1、全屏滚动原理</p>
<p>先把全屏滚动效果的设计分两部分： 背景图+内容。（这里的背景图指纹理或者照片作为背景）</p>
<p>对于背景图，开发的设置是：width：100%；heigth：100%。意思是无论我们设计多大尺寸的背景图，最终都会以铺面浏览器窗口来显示。背景图的显示又可以分为两种情况，第一种：裁剪显示（从左上角，右下角，中间开始裁剪）；第二种：缩放显示。</p>
<p>对于全屏滚动效果，背景图宽高就是浏览器窗口的宽高，但是浏览器窗口有各种尺寸，虽然常见16:9这种，但不是每一个窗口都是有比例可循的，如果以图片缩放显示会拉扯图片导致变形，所以只能采用剪裁显示。裁剪方式需要把背景图设计为最大尺寸，一般是1920px*1200px，当窗口尺寸不匹配时，就可以裁剪某一区域来显示。</p>
<p>对于内容区域，开发一般是按照最小显示器的分辨率设置，一般宽在1000px以内，高在768px以内。和我们平时设置网页尺寸的原理一样，都是为了保证原图显示，即：不做裁剪和缩放处理。</p>
<p>2、交互</p>
<p>设计这种全屏滚动效果，目的就是好看，大气，所以交互也是考虑的重点。那有哪些值得借鉴的优秀交互呢？这里给大家分享几个案例。</p>
<p>3、怎么设计</p>
<p>先说背景图，背景图可以为纯色、渐变、纹理、照片。纯色背景是最方便的，不用传图，代码设置即可。渐变开发也可以设置，或者切图的方式。纹理，如果是重复性的可以切图，不可重复的就和照片处理方式一样。对于照片，就只能是裁剪方式了。</p>
<p>前面说了，剪裁的方式图片设计为最大尺寸1920px*1200px，压缩到100KB以内。代码默认从左上角开始剪裁一个区域，也可以设置为右下角，和中间区域。</p>
<p>background-position-x: 0%;</p>
<p>background-position-y: 0%;</p>
<p>为了保证剪裁后图片的美观度，最好找画面内元素较小的图片，不要那种整张图片多大一个物体，比如下面这种：</p>
<p>再来说内容，设置为1000px*700px以内，因为要考虑上下留白。不考虑响应式或者动效的话可以把内容切成透明png图片给开发。对于全屏滚动的响应式设计，建议针对移动设备设计一套图。</p>
<p>4、视差</p>
<p>利用视觉错位形成的效果。</p>
<p>5、类3D</p>
<p>通过对平面图片加透视，位移形成的效果。</p> </div>
<div class="tags"> <a href="http://news.xiuzhanwang.com/tags-1735693624.html" title="h5页面">h5页面</a>
<a href="http://news.xiuzhanwang.com/tags-1735693624-8fh.html" title="背景图">背景图</a>
<a href="http://news.xiuzhanwang.com/tags-1734646932.html" title="滚动条">滚动条</a>
<a href="http://news.xiuzhanwang.com/tags-1735693624-iqd.html" title="滑动效果">滑动效果</a>
<a href="http://news.xiuzhanwang.com/tags-1735693624-w5f.html" title="html5页面">html5页面</a>
</div>
<div class="post-ct">
本站内容来自用户投稿，如果侵犯了您的权利，请与我们联系删除。联系邮箱：835971066@qq.com <p>本文链接：http://news.xiuzhanwang.com/post/1624.html</p>
</div>
</div>
<div class="prev-next">
<p class="prev"><span>上一篇</span>
<a href="http://news.xiuzhanwang.com/post/1623.html">爱投资企业网站</a>
</p>
<p class="next"><span>下一篇</span>
<a href="http://news.xiuzhanwang.com/post/1625.html">简单大气的企业网站模板</a>
</p>
</div>
</div>
<div class="related-list">
<h4 class="related-title">相关文章</h4>
<ul>
<li>
<a href="http://news.xiuzhanwang.com/post/4379.html" title="企业网站虚拟主机怎么选">企业网站虚拟主机怎么选</a>
<span>2025-03-06</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4373.html" title="宁海企业网站建设好吗">宁海企业网站建设好吗</a>
<span>2025-03-06</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4370.html" title="最热门企业网站排行">最热门企业网站排行</a>
<span>2025-03-05</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4368.html" title="沙田企业网站推广费用">沙田企业网站推广费用</a>
<span>2025-03-05</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4355.html" title="万宁企业网络推广网站">万宁企业网络推广网站</a>
<span>2025-03-04</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4340.html" title="鹤壁本地企业网站开发">鹤壁本地企业网站开发</a>
<span>2025-03-03</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4337.html" title="苏州企业网站建设一条龙">苏州企业网站建设一条龙</a>
<span>2025-03-03</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4333.html" title="仓储企业网站">仓储企业网站</a>
<span>2025-03-02</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4329.html" title="做企业网站排名选哪家">做企业网站排名选哪家</a>
<span>2025-03-02</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/4323.html" title="营销型企业网站搭建实训">营销型企业网站搭建实训</a>
<span>2025-03-01</span>
</li>
</ul>
</div>
</div>
</div>
<div class="aside right-wrap">
<!--最新文章-->
<div class="widget sidebar">
<div class="side-title">
<h4>最新发布</h4>
</div>
<ul>
<li class="widget-item first-widget-item">
<a href="http://news.xiuzhanwang.com/post/4402.html" title="基础型企业网站论文">
<div class="first-module-Img">
<img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/4.jpg" alt="基础型企业网站论文">
<div class="first-module-title"><h3>基础型企业网站论文</h3></div>
</div>
</a>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4401.html" title="企业网站实现外网访问">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/10.jpg" alt="企业网站实现外网访问"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4401.html" title="企业网站实现外网访问">企业网站实现外网访问</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4400.html" title="国外建立企业网站">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/7.jpg" alt="国外建立企业网站"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4400.html" title="国外建立企业网站">国外建立企业网站</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4399.html" title="凌云贺州企业网站建设">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/10.jpg" alt="凌云贺州企业网站建设"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4399.html" title="凌云贺州企业网站建设">凌云贺州企业网站建设</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4398.html" title="花都企业网站费用">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/9.jpg" alt="花都企业网站费用"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4398.html" title="花都企业网站费用">花都企业网站费用</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4397.html" title="企业网站访问">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/1.jpg" alt="企业网站访问"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4397.html" title="企业网站访问">企业网站访问</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4396.html" title="通州企业网站制作价格多少">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/5.jpg" alt="通州企业网站制作价格多少"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4396.html" title="通州企业网站制作价格多少">通州企业网站制作价格多少</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
<li class="widget-item">
<a href="http://news.xiuzhanwang.com/post/4395.html" title="企业网站国家有补助吗">
<div class="module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/4.jpg" alt="企业网站国家有补助吗"></div>
</a>
<div class="article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/4395.html" title="企业网站国家有补助吗">企业网站国家有补助吗</a></h3>
<div class="widget-meta"><span>2025-03-08</span></div>
</div>
</li>
</ul>
</div>
<!--标签云-->
<div class="widget sidebar">
<div class="side-title">
<h4>热门标签</h4>
</div>
<ul class="tag-list">
<li><a href="http://news.xiuzhanwang.com/tags-1734055791-4bp.html" title="CSS">CSS</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734382922.html" title="HTML">HTML</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734300547.html" title="css">css</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734116699.html" title="numbers">numbers</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1735513829.html" title="网页设计">网页设计</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734379534.html" title="hexadecimal">hexadecimal</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734286031.html" title="data">data</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734307775.html" title="html">html</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734476918.html" title="前端开发">前端开发</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734480359.html" title="JavaScript">JavaScript</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734365952-q6c.html" title="html5">html5</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734379534-tig.html" title="strings">strings</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734398046.html" title="float">float</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734570731-ei4.html" title="C语言">C语言</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1735059938-7wx.html" title="文档流">文档流</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734116699-esz.html" title="patterns">patterns</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734116699-1gb.html" title="sequences">sequences</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734282496-9d2.html" title="网页布局">网页布局</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734382922-syb.html" title="CSS样式">CSS样式</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734563290.html" title="浮点数">浮点数</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734638531-twc.html" title="margin">margin</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734649753.html" title="XML">XML</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1735341008.html" title="Python">Python</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1735671881-u4w.html" title="清除浮动">清除浮动</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734055791-6p9.html" title="样式表">样式表</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734131096.html" title="java">java</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734300547-a6v.html" title="内联样式">内联样式</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734365952-47n.html" title="css样式">css样式</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734379534-nqo.html" title="random">random</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734386603.html" title="html元素">html元素</a></li>
</ul>
</div>
</div>
<div class="clear"></div> </div>
</div>
<footer>
<div class="container">
<p><a href="/sitemap/map.xml">XML地图</a> | <a href="/sitemap/map.txt">TXT地图</a> | <a href="/sitemap/map.html">HTML地图</a></p>
<p>版权所有：麦站网站模板 <a href="https://beian.miit.gov.cn/">备案号</a></p>
</div>
</footer>
<div class="qng-box">
<a rel="nofollow" id="connact-qq" href="tencent://message/?uin=835971066&Site=Themeol.Com&Menu=yes">
<i class="fa fa-qq"></i>
</a> <a href="javascript:switchNightMode()" target="_self" id="night-btn">
<i class="fa fa-moon-o"></i>
</a>
<div id="go-to-top">
<i class="fa fa-angle-up"></i>
</div>
</div>
<script type=application/ld+json>
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonId",
"@id": "http://news.xiuzhanwang.com/post/1624.html",
"title": "h5页面背景图很长要有滚动条滑动效果的实现",
"image": [
"http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/9.jpg"
],
"description": "最近做项目过程中，老大提了个很奇葩的要求
背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片的高，把窗口的高设置成背景颜色的高。反之就是窗口的高。 感觉太麻烦，用css就可以实现他的要求",
"pubDate": "2025-01-01T09:07:04",
"upDate": "2025-01-01T09:07:04",
}
</script>
<style>.ly_linkts{width:100%;padding:10px;}.ly_linkts ul{width:100%;}.ly_linkts li{display:inline-block;padding:5px;}</style><div class="ly_linkts">友情链接：<ul><li><a href="http://www.tjshtjc.cn/" target="_blank">天津盛世蓝天防尘网厂</a></li>
<li><a href="http://www.myfwcyw.cn/" target="_blank">西安月来轩母婴服务有限公司</a></li>
<li><a href="http://www.lawtaotao.com/" target="_blank">律淘淘</a></li>
<li><a href="http://www.ziyuanpharm.com/" target="_blank">上海紫源制药有限公司</a></li>
<li><a href="http://www.hbtaicun.com/" target="_blank">安平县泰存金属丝网制造有限公司</a></li>
<li><a href="http://www.pxykl.cn/" target="_blank">上海普昕水族工程有限公司</a></li>
<li><a href="http://www.lhtxa.com/" target="_blank">西安美人鱼体育文化传播有限公司</a></li>
<li><a href="http://www.haigood.cn/" target="_blank">深圳海良实业有限公司</a></li>
<li><a href="http://www.niuli021.com/" target="_blank">上海牛力机械</a></li>
<li><a href="http://www.18765073339.com/" target="_blank">烟台金顺搬家有限公司</a></li>
<li><a href="http://www.wxzgys.com/" target="_blank">无锡紫光印刷制品有限公司</a></li>
<li><a href="http://www.768913.com/" target="_blank">河北尚亿管道制造有限公司</a></li>
<li><a href="http://www.yanqituoliu.net/" target="_blank">山东保蓝烟气脱硫厂家</a></li>
<li><a href="http://www.cqweixing.cn/" target="_blank">文华建材</a></li>
<li><a href="http://www.sztwohan.com/" target="_blank">深圳市松崎机器人自动化设备有限公司</a></li>
<li><a href="http://www.jhtydlsb.com" target="_blank">金华市天亿电力设备有限公司</a></li>
<li><a href="http://www.haixxc.com/" target="_blank">北京海鑫信诚企业管理咨询有限公司</a></li>
<li><a href="http://www.xlts2000.cn/" target="_blank">6岁母婴用品一站式购物官方网站</a></li>
<li><a href="http://www.wuxibangyao.com/" target="_blank">无锡市邦尧机械工程有限公司</a></li>
<li><a href="http://www.cdmbjc.com" target="_blank">金牛区美邦建材经营部</a></li>
<li><a href="http://www.chunshuiyi.com/" target="_blank">河南天驰纯水仪有限公司</a></li>
</ul></div></body>
</html><!--101.73 ms , 24 queries , 3833kb memory , 0 error-->