最近做项目过程中，老大提了个很奇葩的要求
背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用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="5a7c-99cb-a219-0874 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="99cb-a219-0874-1db7 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="a219-0874-1db7-756d post-ct">
本站内容来自用户投稿，如果侵犯了您的权利，请与我们联系删除。联系邮箱：835971066@qq.com <p>本文链接：http://news.xiuzhanwang.com/post/1624.html</p>
</div>
</div>
<div class="0874-1db7-756d-6747 prev-next">
<p class="1db7-756d-6747-a21e prev"><span>上一篇</span>
<a href="http://news.xiuzhanwang.com/post/1623.html">爱投资企业网站</a>
</p>
<p class="756d-6747-a21e-dd51 next"><span>下一篇</span>
<a href="http://news.xiuzhanwang.com/post/1625.html">简单大气的企业网站模板</a>
</p>
</div>
</div>
<div class="6747-a21e-dd51-8304 related-list">
<h4 class="a21e-dd51-8304-5cf9 related-title">相关文章</h4>
<ul>
<li>
<a href="http://news.xiuzhanwang.com/post/1625.html" title="简单大气的企业网站模板">简单大气的企业网站模板</a>
<span>2025-01-01</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1612.html" title="如何设置ElementUI的全局字体大小">如何设置ElementUI的全局字体大小</a>
<span>2025-01-01</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1590.html" title="内江做企业网站">内江做企业网站</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1587.html" title="企业网站开票">企业网站开票</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1585.html" title="凡科建站教程企业网站">凡科建站教程企业网站</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1578.html" title="企业网站建设推广价格高">企业网站建设推广价格高</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1571.html" title="品牌企业网站推广文案">品牌企业网站推广文案</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1567.html" title="制造企业网站项目">制造企业网站项目</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1559.html" title="重庆企业网站开发制作">重庆企业网站开发制作</a>
<span>2024-12-31</span>
</li>
<li>
<a href="http://news.xiuzhanwang.com/post/1556.html" title="企业网站推广太原">企业网站推广太原</a>
<span>2024-12-31</span>
</li>
</ul>
</div>
<div id="comment">
<div class="dd51-8304-5cf9-6ee3 comm-tab">
<div id="comm-post">
<div class="8304-5cf9-6ee3-4c86 com-tit">
<h4>发表评论</h4>
</div>
<div class="5cf9-6ee3-4c86-91b1 comm-form" id="comm-form">
<form id="frmSumbit" target="_self" method="post" action="http://news.xiuzhanwang.com/zb_system/cmd.php?act=cmt&postid=1624&key=8ddd0fc08d53a6b0cb645fe7a4a964d3">
<input type="hidden" name="inpId" id="inpId" value="1624"/>
<input type="hidden" name="inpRevID" id="inpRevID" value="0"/>
<div class="6ee3-4c86-91b1-211d comm-user">
<ul>
<li>
<div class="355e-8f6e-8832-5a7c comm-group">
<span class="8f6e-8832-5a7c-99cb comm-user-info">昵称</span>
<input class="8832-5a7c-99cb-a219 ipt" type="text" name="inpName" id="inpName" value="访客" tabindex="2" placeholder="昵称(必填)">
</div>
</li>
<li>
<div class="5a7c-99cb-a219-0874 comm-group">
<span class="99cb-a219-0874-1db7 comm-user-info">邮箱</span>
<input class="a219-0874-1db7-756d ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱">
</div>
</li>
<li>
<div class="0874-1db7-756d-6747 comm-group">
<span class="1db7-756d-6747-a21e comm-user-info">网址</span>
<input class="756d-6747-a21e-dd51 ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址">
</div>
</li>
<li>
<div class="6747-a21e-dd51-8304 comm-group">
<label class="a21e-dd51-8304-5cf9 hide" for="author"></label>
<span class="dd51-8304-5cf9-6ee3 comm-user-info">验证</span>
<input class="8304-5cf9-6ee3-4c86 ipt" type="text" name="inpVerify" id="inpVerify" tabindex="4" placeholder="输入验证码">
<img src="http://news.xiuzhanwang.com/zb_system/script/c_validcode.php?id=cmt" class="5cf9-6ee3-4c86-91b1 verifyimg" onclick="javascript:this.src='http://news.xiuzhanwang.com/zb_system/script/c_validcode.php?id=cmt&tm='+Math.random();" />
</div>
</li>
</ul>
</div>
<div class="6ee3-4c86-91b1-211d comm-area">
<textarea placeholder="写下你的评论..." class="355e-8f6e-8832-5a7c textarea" name="txaArticle" id="txaArticle" tabindex="1"></textarea>
</div>
<div class="8f6e-8832-5a7c-99cb comm-sumbit r">
<button name="sumbit" type="submit" id="submit" tabindex="5" onclick="return zbp.comment.post()">提交评论</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
document.getElementById("txaArticle").onkeydown = function (moz_ev){
var ev = null;
if (window.event){
ev = window.event;
}else{
ev = moz_ev;
}
if (ev != null && ev.ctrlKey && ev.keyCode == 13){
document.getElementById("submit").click();
}
}
</script> </div>
<div class="8832-5a7c-99cb-a219 comm-msgs">
<div class="5a7c-99cb-a219-0874 com-tit">
<h4>评论列表</h4>
</div>
<label id="AjaxCommentBegin"></label>
<label id="AjaxCommentEnd"></label>
<div class="99cb-a219-0874-1db7 no-comm">
<p><i class="a219-0874-1db7-756d iconfont icon-write"></i> 还没有评论，快来说点什么吧~</p>
</div>
</div>
</div> </div>
</div>
<div class="0874-1db7-756d-6747 aside right-wrap">
<!--最新文章-->
<div class="1db7-756d-6747-a21e widget sidebar">
<div class="756d-6747-a21e-dd51 side-title">
<h4>最新发布</h4>
</div>
<ul>
<li class="6747-a21e-dd51-8304 widget-item first-widget-item">
<a href="http://news.xiuzhanwang.com/post/1627.html" title="吉林企业网站制作">
<div class="a21e-dd51-8304-5cf9 first-module-Img">
<img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2025-01-01/6774a8f14b8c4.jpeg" alt="吉林企业网站制作">
<div class="dd51-8304-5cf9-6ee3 first-module-title"><h3>吉林企业网站制作</h3></div>
</div>
</a>
</li>
<li class="8304-5cf9-6ee3-4c86 widget-item">
<a href="http://news.xiuzhanwang.com/post/1626.html" title="冷酸灵企业网站">
<div class="5cf9-6ee3-4c86-91b1 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2025-01-01/6774a1b6db512.jpeg" alt="冷酸灵企业网站"></div>
</a>
<div class="6ee3-4c86-91b1-211d article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1626.html" title="冷酸灵企业网站">冷酸灵企业网站</a></h3>
<div class="355e-8f6e-8832-5a7c widget-meta"><span>2025-01-01</span></div>
</div>
</li>
<li class="8f6e-8832-5a7c-99cb widget-item">
<a href="http://news.xiuzhanwang.com/post/1625.html" title="简单大气的企业网站模板">
<div class="8832-5a7c-99cb-a219 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2025-01-01/67749ac5cbe8c.jpeg" alt="简单大气的企业网站模板"></div>
</a>
<div class="5a7c-99cb-a219-0874 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1625.html" title="简单大气的企业网站模板">简单大气的企业网站模板</a></h3>
<div class="99cb-a219-0874-1db7 widget-meta"><span>2025-01-01</span></div>
</div>
</li>
<li class="a219-0874-1db7-756d widget-item">
<a href="http://news.xiuzhanwang.com/post/1624.html" title="h5页面背景图很长要有滚动条滑动效果的实现">
<div class="0874-1db7-756d-6747 module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/5.jpg" alt="h5页面背景图很长要有滚动条滑动效果的实现"></div>
</a>
<div class="1db7-756d-6747-a21e article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1624.html" title="h5页面背景图很长要有滚动条滑动效果的实现">h5页面背景图很长要有滚动条滑动效果的实现</a></h3>
<div class="756d-6747-a21e-dd51 widget-meta"><span>2025-01-01</span></div>
</div>
</li>
<li class="6747-a21e-dd51-8304 widget-item">
<a href="http://news.xiuzhanwang.com/post/1623.html" title="爱投资企业网站">
<div class="a21e-dd51-8304-5cf9 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2025-01-01/677493d47df56.jpeg" alt="爱投资企业网站"></div>
</a>
<div class="dd51-8304-5cf9-6ee3 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1623.html" title="爱投资企业网站">爱投资企业网站</a></h3>
<div class="8304-5cf9-6ee3-4c86 widget-meta"><span>2025-01-01</span></div>
</div>
</li>
<li class="5cf9-6ee3-4c86-91b1 widget-item">
<a href="http://news.xiuzhanwang.com/post/1622.html" title="厦门做企业网站多少钱">
<div class="6ee3-4c86-91b1-211d module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2025-01-01/67748c9b1af39.jpeg" alt="厦门做企业网站多少钱"></div>
</a>
<div class="355e-8f6e-8832-5a7c article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1622.html" title="厦门做企业网站多少钱">厦门做企业网站多少钱</a></h3>
<div class="8f6e-8832-5a7c-99cb widget-meta"><span>2025-01-01</span></div>
</div>
</li>
<li class="8832-5a7c-99cb-a219 widget-item">
<a href="http://news.xiuzhanwang.com/post/1621.html" title="HTML|内联CSS-背景和字体">
<div class="5a7c-99cb-a219-0874 module-img"><img src="http://news.xiuzhanwang.com/zb_users/theme/themeolBkThree/include/random/5.jpg" alt="HTML|内联CSS-背景和字体"></div>
</a>
<div class="99cb-a219-0874-1db7 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1621.html" title="HTML|内联CSS-背景和字体">HTML|内联CSS-背景和字体</a></h3>
<div class="a219-0874-1db7-756d widget-meta"><span>2025-01-01</span></div>
</div>
</li>
<li class="0874-1db7-756d-6747 widget-item">
<a href="http://news.xiuzhanwang.com/post/1620.html" title="常州企业网站报价行情网">
<div class="1db7-756d-6747-a21e module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2025-01-01/6774858c59d6c.jpeg" alt="常州企业网站报价行情网"></div>
</a>
<div class="756d-6747-a21e-dd51 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/1620.html" title="常州企业网站报价行情网">常州企业网站报价行情网</a></h3>
<div class="6747-a21e-dd51-8304 widget-meta"><span>2025-01-01</span></div>
</div>
</li>
</ul>
</div>
<!--热门排行-->
<div class="a21e-dd51-8304-5cf9 widget sidebar">
<div class="dd51-8304-5cf9-6ee3 side-title">
<h4>热门文章</h4>
</div>
<ul>
<li class="8304-5cf9-6ee3-4c86 widget-item">
<a href="http://news.xiuzhanwang.com/post/90.html" title="福建制作企业网站设计">
<div class="5cf9-6ee3-4c86-91b1 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-04/674f32284fbc6.jpeg" alt="福建制作企业网站设计"></div>
</a>
<div class="6ee3-4c86-91b1-211d article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/90.html" title="福建制作企业网站设计">福建制作企业网站设计</a></h3>
<div class="355e-8f6e-8832-5a7c widget-meta"><span>2024-12-04</span></div>
</div>
</li>
<li class="8f6e-8832-5a7c-99cb widget-item">
<a href="http://news.xiuzhanwang.com/post/95.html" title="企业网站模板好用吗">
<div class="8832-5a7c-99cb-a219 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-04/674f555e2803b.jpeg" alt="企业网站模板好用吗"></div>
</a>
<div class="5a7c-99cb-a219-0874 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/95.html" title="企业网站模板好用吗">企业网站模板好用吗</a></h3>
<div class="99cb-a219-0874-1db7 widget-meta"><span>2024-12-04</span></div>
</div>
</li>
<li class="a219-0874-1db7-756d widget-item">
<a href="http://news.xiuzhanwang.com/post/115.html" title="为什进不了企业网站了">
<div class="0874-1db7-756d-6747 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-04/674fe2446a32f.jpeg" alt="为什进不了企业网站了"></div>
</a>
<div class="1db7-756d-6747-a21e article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/115.html" title="为什进不了企业网站了">为什进不了企业网站了</a></h3>
<div class="756d-6747-a21e-dd51 widget-meta"><span>2024-12-04</span></div>
</div>
</li>
<li class="6747-a21e-dd51-8304 widget-item">
<a href="http://news.xiuzhanwang.com/post/119.html" title="东莞企业网站开发选哪家">
<div class="a21e-dd51-8304-5cf9 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-04/674ffe0706549.jpeg" alt="东莞企业网站开发选哪家"></div>
</a>
<div class="dd51-8304-5cf9-6ee3 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/119.html" title="东莞企业网站开发选哪家">东莞企业网站开发选哪家</a></h3>
<div class="8304-5cf9-6ee3-4c86 widget-meta"><span>2024-12-04</span></div>
</div>
</li>
<li class="5cf9-6ee3-4c86-91b1 widget-item">
<a href="http://news.xiuzhanwang.com/post/138.html" title="象山企业网站制作怎么选">
<div class="6ee3-4c86-91b1-211d module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-05/675083a357aee.jpeg" alt="象山企业网站制作怎么选"></div>
</a>
<div class="355e-8f6e-8832-5a7c article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/138.html" title="象山企业网站制作怎么选">象山企业网站制作怎么选</a></h3>
<div class="8f6e-8832-5a7c-99cb widget-meta"><span>2024-12-05</span></div>
</div>
</li>
<li class="8832-5a7c-99cb-a219 widget-item">
<a href="http://news.xiuzhanwang.com/post/207.html" title="如何做企业网站推广代理">
<div class="5a7c-99cb-a219-0874 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-06/675268c5c3b14.jpeg" alt="如何做企业网站推广代理"></div>
</a>
<div class="99cb-a219-0874-1db7 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/207.html" title="如何做企业网站推广代理">如何做企业网站推广代理</a></h3>
<div class="a219-0874-1db7-756d widget-meta"><span>2024-12-06</span></div>
</div>
</li>
<li class="0874-1db7-756d-6747 widget-item">
<a href="http://news.xiuzhanwang.com/post/211.html" title="小型企业网站设计服务">
<div class="1db7-756d-6747-a21e module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-06/675284df9c836.jpeg" alt="小型企业网站设计服务"></div>
</a>
<div class="756d-6747-a21e-dd51 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/211.html" title="小型企业网站设计服务">小型企业网站设计服务</a></h3>
<div class="6747-a21e-dd51-8304 widget-meta"><span>2024-12-06</span></div>
</div>
</li>
<li class="a21e-dd51-8304-5cf9 widget-item">
<a href="http://news.xiuzhanwang.com/post/219.html" title="宝鸡做企业网站建设">
<div class="dd51-8304-5cf9-6ee3 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-06/6752bd44b00ad.jpeg" alt="宝鸡做企业网站建设"></div>
</a>
<div class="8304-5cf9-6ee3-4c86 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/219.html" title="宝鸡做企业网站建设">宝鸡做企业网站建设</a></h3>
<div class="5cf9-6ee3-4c86-91b1 widget-meta"><span>2024-12-06</span></div>
</div>
</li>
</ul>
</div>
<!--热评文章-->
<div class="6ee3-4c86-91b1-211d widget sidebar">
<div class="355e-8f6e-8832-5a7c side-title">
<h4>热评文章</h4>
</div>
<ul>
<li class="8f6e-8832-5a7c-99cb widget-item">
<a href="http://news.xiuzhanwang.com/post/83.html" title="传统型企业网站有哪些">
<div class="8832-5a7c-99cb-a219 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-03/674f144ac7015.jpeg" alt="传统型企业网站有哪些"></div>
</a>
<div class="5a7c-99cb-a219-0874 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/83.html" title="传统型企业网站有哪些">传统型企业网站有哪些</a></h3>
<div class="99cb-a219-0874-1db7 widget-meta"><span>2024-12-03</span></div>
</div>
</li>
<li class="a219-0874-1db7-756d widget-item">
<a href="http://news.xiuzhanwang.com/post/84.html" title="国外企业网站建设模型">
<div class="0874-1db7-756d-6747 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-03/674f145302201.jpeg" alt="国外企业网站建设模型"></div>
</a>
<div class="1db7-756d-6747-a21e article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/84.html" title="国外企业网站建设模型">国外企业网站建设模型</a></h3>
<div class="756d-6747-a21e-dd51 widget-meta"><span>2024-12-03</span></div>
</div>
</li>
<li class="6747-a21e-dd51-8304 widget-item">
<a href="http://news.xiuzhanwang.com/post/85.html" title="企业网站seo托管怎么做的">
<div class="a21e-dd51-8304-5cf9 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-03/674f1463047d8.jpeg" alt="企业网站seo托管怎么做的"></div>
</a>
<div class="dd51-8304-5cf9-6ee3 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/85.html" title="企业网站seo托管怎么做的">企业网站seo托管怎么做的</a></h3>
<div class="8304-5cf9-6ee3-4c86 widget-meta"><span>2024-12-03</span></div>
</div>
</li>
<li class="5cf9-6ee3-4c86-91b1 widget-item">
<a href="http://news.xiuzhanwang.com/post/86.html" title="企业网站开始使用了吗">
<div class="6ee3-4c86-91b1-211d module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-03/674f15f7e3ad2.jpeg" alt="企业网站开始使用了吗"></div>
</a>
<div class="355e-8f6e-8832-5a7c article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/86.html" title="企业网站开始使用了吗">企业网站开始使用了吗</a></h3>
<div class="8f6e-8832-5a7c-99cb widget-meta"><span>2024-12-03</span></div>
</div>
</li>
<li class="8832-5a7c-99cb-a219 widget-item">
<a href="http://news.xiuzhanwang.com/post/87.html" title="相关户外的企业网站">
<div class="5a7c-99cb-a219-0874 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-03/674f1d010a3e9.jpeg" alt="相关户外的企业网站"></div>
</a>
<div class="99cb-a219-0874-1db7 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/87.html" title="相关户外的企业网站">相关户外的企业网站</a></h3>
<div class="a219-0874-1db7-756d widget-meta"><span>2024-12-03</span></div>
</div>
</li>
<li class="0874-1db7-756d-6747 widget-item">
<a href="http://news.xiuzhanwang.com/post/88.html" title="吴忠企业网站建设平台">
<div class="1db7-756d-6747-a21e module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-03/674f247231de6.jpeg" alt="吴忠企业网站建设平台"></div>
</a>
<div class="756d-6747-a21e-dd51 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/88.html" title="吴忠企业网站建设平台">吴忠企业网站建设平台</a></h3>
<div class="6747-a21e-dd51-8304 widget-meta"><span>2024-12-03</span></div>
</div>
</li>
<li class="a21e-dd51-8304-5cf9 widget-item">
<a href="http://news.xiuzhanwang.com/post/89.html" title="企业网站信息源是什么">
<div class="dd51-8304-5cf9-6ee3 module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-04/674f2b1369f28.jpeg" alt="企业网站信息源是什么"></div>
</a>
<div class="8304-5cf9-6ee3-4c86 article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/89.html" title="企业网站信息源是什么">企业网站信息源是什么</a></h3>
<div class="5cf9-6ee3-4c86-91b1 widget-meta"><span>2024-12-04</span></div>
</div>
</li>
<li class="6ee3-4c86-91b1-211d widget-item">
<a href="http://news.xiuzhanwang.com/post/90.html" title="福建制作企业网站设计">
<div class="355e-8f6e-8832-5a7c module-img"><img src="http://news.xiuzhanwang.com/zb_users/upload/editor/water/2024-12-04/674f32284fbc6.jpeg" alt="福建制作企业网站设计"></div>
</a>
<div class="8f6e-8832-5a7c-99cb article-txt">
<h3><a href="http://news.xiuzhanwang.com/post/90.html" title="福建制作企业网站设计">福建制作企业网站设计</a></h3>
<div class="8832-5a7c-99cb-a219 widget-meta"><span>2024-12-04</span></div>
</div>
</li>
</ul>
</div>
<!--随机文章-->
<div class="5a7c-99cb-a219-0874 widget sidebar">
<div class="99cb-a219-0874-1db7 side-title">
<h4>猜您喜欢</h4>
</div>
<ul>
<li class="a219-0874-1db7-756d widget-item">
<h3 class="0874-1db7-756d-6747 rand-title"><a href="http://news.xiuzhanwang.com/post/549.html" title="海南制作企业网站">海南制作企业网站</a></h3>
</li>
<li class="1db7-756d-6747-a21e widget-item">
<h3 class="756d-6747-a21e-dd51 rand-title"><a href="http://news.xiuzhanwang.com/post/238.html" title="国外查企业网站">国外查企业网站</a></h3>
</li>
<li class="6747-a21e-dd51-8304 widget-item">
<h3 class="a21e-dd51-8304-5cf9 rand-title"><a href="http://news.xiuzhanwang.com/post/165.html" title="企业网站运营分工表格">企业网站运营分工表格</a></h3>
</li>
<li class="dd51-8304-5cf9-6ee3 widget-item">
<h3 class="8304-5cf9-6ee3-4c86 rand-title"><a href="http://news.xiuzhanwang.com/post/550.html" title="什么是高科技企业网站">什么是高科技企业网站</a></h3>
</li>
<li class="5cf9-6ee3-4c86-91b1 widget-item">
<h3 class="6ee3-4c86-91b1-211d rand-title"><a href="http://news.xiuzhanwang.com/post/457.html" title="泸州市企业网站建设">泸州市企业网站建设</a></h3>
</li>
<li class="355e-8f6e-8832-5a7c widget-item">
<h3 class="8f6e-8832-5a7c-99cb rand-title"><a href="http://news.xiuzhanwang.com/post/414.html" title="绵阳企业网站建设规划">绵阳企业网站建设规划</a></h3>
</li>
<li class="8832-5a7c-99cb-a219 widget-item">
<h3 class="5a7c-99cb-a219-0874 rand-title"><a href="http://news.xiuzhanwang.com/post/440.html" title="统一企业网站年龄">统一企业网站年龄</a></h3>
</li>
<li class="99cb-a219-0874-1db7 widget-item">
<h3 class="a219-0874-1db7-756d rand-title"><a href="http://news.xiuzhanwang.com/post/307.html" title="有哪些私人企业网站">有哪些私人企业网站</a></h3>
</li>
<li class="0874-1db7-756d-6747 widget-item">
<h3 class="1db7-756d-6747-a21e rand-title"><a href="http://news.xiuzhanwang.com/post/161.html" title="企业网站如何icp备案">企业网站如何icp备案</a></h3>
</li>
<li class="756d-6747-a21e-dd51 widget-item">
<h3 class="6747-a21e-dd51-8304 rand-title"><a href="http://news.xiuzhanwang.com/post/368.html" title="南京建企业网站哪家好">南京建企业网站哪家好</a></h3>
</li>
</ul>
</div>
<!--标签云-->
<div class="a21e-dd51-8304-5cf9 widget sidebar">
<div class="dd51-8304-5cf9-6ee3 side-title">
<h4>热门标签</h4>
</div>
<ul class="8304-5cf9-6ee3-4c86 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-1734116699.html" title="numbers">numbers</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-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-1734300547.html" title="css">css</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-1734480359.html" title="JavaScript">JavaScript</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734300547-a6v.html" title="内联样式">内联样式</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-1734382922-syb.html" title="CSS样式">CSS样式</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-1734055791-6p9.html" title="样式表">样式表</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-nqo.html" title="random">random</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734642172-8b9.html" title="javascript">javascript</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734807957-7z6.html" title="viewport">viewport</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734052603-x8q.html" title="外边距合并">外边距合并</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734116699-krd.html" title="letters">letters</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734127440-swu.html" title="jsp">jsp</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734206710.html" title="显微镜支架">显微镜支架</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734282496-ziw.html" title="HTML元素">HTML元素</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734303947.html" title="a标签">a标签</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734307775-ewc.html" title="body">body</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734365952-zmg.html" title="字体设置">字体设置</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734368500.html" title="Selenium">Selenium</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734368500-hbd.html" title="元素定位">元素定位</a></li>
<li><a href="http://news.xiuzhanwang.com/tags-1734386603.html" title="html元素">html元素</a></li>
</ul>
</div>
</div>
<div class="5cf9-6ee3-4c86-91b1 clear"></div> </div>
</div>
<footer>
<div class="6ee3-4c86-91b1-211d 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="355e-8f6e-8832-5a7c qng-box">
<a rel="nofollow" id="connact-qq" href="tencent://message/?uin=835971066&Site=Themeol.Com&Menu=yes">
<i class="8f6e-8832-5a7c-99cb fa fa-qq"></i>
</a> <a href="javascript:switchNightMode()" target="_self" id="night-btn">
<i class="8832-5a7c-99cb-a219 fa fa-moon-o"></i>
</a>
<div id="go-to-top">
<i class="5a7c-99cb-a219-0874 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/7.jpg"
],
"description": "最近做项目过程中，老大提了个很奇葩的要求
背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片的高，把窗口的高设置成背景颜色的高。反之就是窗口的高。 感觉太麻烦，用css就可以实现他的要求",
"pubDate": "2025-01-01T09:07:04",
"upDate": "2025-01-01T09:07:04",
}
</script>
<style>.ly_linkts{width:100%;padding:10px;cursor: pointer;}.ly_linkts ul{width:100%;display:none;}.ly_linkts li{display:inline-block;padding:5px;}</style><div class="99cb-a219-0874-1db7 ly_linkts">友情链接：<ul><li><a href="http://www.bbmqz.com/" target="_blank">宿州晟雾商贸有限公司</a></li>
<li><a href="http://www.maitengfrp.cn" target="_blank">河北迈腾玻璃钢有限公司</a></li>
<li><a href="http://www.sfxr119.com" target="_blank">沈阳赛福兴润消防设备有限公司</a></li>
<li><a href="http://www.lflianxuyashi.com" target="_blank">廊坊市峨秀科技有限公司</a></li>
<li><a href="http://www.shadunsi.com/" target="_blank">莎顿斯卫浴洁具有限公司</a></li>
<li><a href="http://www.jdsdhzs.com" target="_blank">同江市江都水稻农民专业合作社</a></li>
<li><a href="http://www.dhglass.com/" target="_blank">深圳市东海玻璃幕墙有限公司</a></li>
<li><a href="http://www.czfbwh.com" target="_blank">宿州隆佑商贸有限公司</a></li>
<li><a href="http://www.bqbaike.com/" target="_blank">百奇留学网</a></li>
<li><a href="http://www.51dxfg.com/" target="_blank">天辰仪器经营部</a></li>
<li><a href="http://www.ltygg.com/" target="_blank">欢畅方管信息网</a></li>
<li><a href="http://www.bbldk.com/" target="_blank">余姚市卫兵安防科技有限公司</a></li>
<li><a href="http://www.yywy2.com" target="_blank">宿州晟雾商贸有限公司</a></li>
<li><a href="http://www.sensheying.com/" target="_blank">网站建设</a></li>
<li><a href="http://www.akltf.com" target="_blank">沈阳市奥凯力通风设备有限公司</a></li>
</ul></div><script>$(document).on("click", ".ly_linkts", function() {$(this).find("ul").toggle();});</script></body>
</html>