1、打开html开发软件，新建一个html代码页面。
2、在html代码页面的
标签里面输入多行段落文字，用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。
3、设置背景图片样式。在
标签后面创建一个<style>标签，然后在这个标签里设置<body>标签的背景图片，以及背景图片不重复。</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Ff7246b600c33874485d1d4ed5f0fd9f9d72aa00f%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/f7246b600c33874485d1d4ed5f0fd9f9d72aa00f"></p>
<p>4、保存html代码后使用浏览器打开，这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F09fa513d269759ee68db855abcfb43166c22df9c%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/09fa513d269759ee68db855abcfb43166c22df9c"></p>
<p>5、使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面，在body样式中添加上background-attachment: fixed即可。</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fac345982b2b7d0a284f3eb0cc5ef76094b369a6d%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/ac345982b2b7d0a284f3eb0cc5ef76094b369a6d"></p>
<p>6、保存html代码页面后刷新浏览器，这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。</p></p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答2：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p><p>第1，字符编码调整为utf-8，你当前使用的是gb2312</p>
<p>第2，background-image属性当中所书写的有误，用实际路径，而且文件夹名字最好不要用中文（基本的开发规范和标准），不要用编码后的字符串，如：</p>
<pre t="code" l="html">background: url('../images/HTML5-学堂.jpg')</pre>
<p>第3，你的路径不要写错，在谷歌或者其他浏览器当中，点击F12键，调出控制台，查看是否有错误，如果有文件没有加载成功，则说明你的相应文件没有成功引入</p>
<p>第4，body当中需要有内容，默认body的高度是由内容撑开的，没有内容body就没有高度，背景图自然无法看到<br></p>
<p>最后，建议你弄本书系统的学一学，里面包括一些类名的命名，书写的规范，在你代码当中都有不少不合适的地方，毕竟学东西是为了有实际的用处，既然要写代码，写的规范一些，按照开发行业标准来写岂不是更好。HTML与CSS方面，推荐《HTML5布局之路》，JS，可以借助《Head First JavaScript程序设计》来入门</p></p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答3：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p>你的代码没有问题。我测试过了。<br>最大的原因可能是你图片的路径问题。你把你写的这个网页，和图片放在一个文件夹里。然后路径就是文件名：url（123.jpg）。绝对能正常显示。<br><br>还有，别用body当标签。body一般是全局设置。一般别用，自己起名字。</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答4：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p><html><br><head><br><style type="text/css"><br>body<br>{ <br> background:url(/H/learn/123.jpeg) no-repeat left center;<br>}<br></style><br></head><br><br><body><br><body><br><p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p><br></body><br></body><br>这样就可以了，如是再显示不出来就是图片路径写错了。试下吧，不行了再问我<br>你应该把图片先放到images文件夹下，自己试试看吧。</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答5：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p>孩子，路径是没有问题滴，但你的这个ID为 header 的容器你是否设置了高度宽度之类的。<br>最简单的验证方法，把 header 设置为<br><br>#header { <br>background-image:url(../images/logo.gif)； <br>border: 1px solid red;<br>} <br><br>看容器是否正常。</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="wendaright">
<div class="wdluluerwema">
<div class="wdxgwttop">相关问答</div>
<div class="wdxgwtnr">
</div>
<div class="clear"></div>
</div>
<!-- 其他随机问答['id'=>alphaID($like['zid'])] -->
<div class="wdluluerwema">
<div class="wdxgwttop">最新问答</div>
<div class="wdxgwtnr">
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/282222487.html">请问在韩国庆熙大学四年学费是多少啊？很谢谢你</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/65789139.html">三国演义31到40回合读后感500字</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/107804434.html">从运城到长治，长途汽车的票价？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/425047119.html">我想在新疆哈密开家建材五金店到哪里进货好些？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/366238160.html">我家没有金鹰卡通和卡酷，有嘉佳卡通，怎么回事</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/574255002.html">java中不同的线程可以同时操作一个文件吗？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/87430848.html">求几个比较经典的扑克牌魔术</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/308080557555963764.html">寻龙决中夏雨说的一句话意思是各回各家</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/1800757285823520347.html">形容女人懒的句子</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/31473227.html">有什么好办法让人不困?</a></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<!-- 移动底部导航 -->
<div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://www.g230.com/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div>
<div class="dibu">
<div class="dibu">
</div>
</div>
<div class="banquan">
<p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p>
</div>
</div>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?78733b427b0a9dce19688d903e89fc12";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
