css背景图片大小自适应(css背景图片)

关于css背景图片大小自适应,css背景图片这个很多人还不知道,今天小六来为大家解答以上的问题,现在让我们一起来看看吧!

1、打开html开发软件,新建一个html代码页面。

2、2、在html代码页面的标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。

3、3、设置背景图片样式。

4、在标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。</p><p>5、4、保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。</p><p>6、5、使用background-attachment: fixed设置背景图片不随滚动条而滚动。</p><p>7、回到html代码页面,在body样式中添加上background-attachment: fixed即可。</p><p>8、6、保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。</p><p>本文到此分享完毕,希望对大家有所帮助。</p> </div> <div class="entry-copyright">免责声明:本文由用户上传,与本网站立场无关。财经信息仅供读者参考,并不构成投资建议。投资者据此操作,风险自担。 如有侵权请联系删除!</div> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-bottom:10px;margin-left:-15px;"><script>wap_show_sosuo();<\/script><\/div>'); }else{ } </script> <div class="article_footer clearfix"> <div class="fr tag"> 标签: </div> </div> </div> <nav class="article-nav post"> <span class="article-nav-prev">上一篇<br><a href="https://www.jjsx.com.cn/xinwen/202209/293081.html" rel="prev">Yisou.com</a></span> <span class="article-nav-next">下一篇<br><a href="https://www.jjsx.com.cn/xinwen/202209/293098.html" rel="next">免息贷款买车和全款买车哪个更划算(免息贷款)</a></span> </nav> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-top:10px;margin-left:-5px;"><script>wap_show_tag_under9();<\/script><\/div>'); }else{ document.write('<div style="text-align:center;margin: 10px 0px;"><script>pc_show_like_under();<\/script><\/div>'); } </script> <section class="related"> <h3 class="title">猜你喜欢</h3> <ul> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278090.html" title="法律的精神(法律精神是什么)" target="_blank" >法律的精神(法律精神是什么)</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278080.html" title="绿河谷贴吧(绿河谷论坛)" target="_blank" >绿河谷贴吧(绿河谷论坛)</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278072.html" title="哈尼族的传统节日有哪些?(哈尼族的传统节日)" target="_blank" >哈尼族的传统节日有哪些?(哈尼族的传统节日)</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278062.html" title="股份和股权怎么分开(股份和股权)" target="_blank" >股份和股权怎么分开(股份和股权)</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278053.html" title="罗浮山下四时春 古诗(罗浮山下四时春)" target="_blank" >罗浮山下四时春 古诗(罗浮山下四时春)</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278034.html" title="手工加工活无押金无保证金外发(手工活加工无押金外放)" target="_blank" >手工加工活无押金无保证金外发(手工活加工无</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278025.html" title="宝应县属于哪个市哪个区(宝应县属于哪个市)" target="_blank" >宝应县属于哪个市哪个区(宝应县属于哪个市)</a></li> <li> <div class="thumbnail"><h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278016.html" title="靓妹" target="_blank" >靓妹</a></li> </ul> </section> <script> if (isMobile()){ document.write('<script>wap_show_artlist1();<\/script>'); }else{ document.write('<div style="text-align:center;"><script>pc_show_tag_under();<\/script><\/div>'); } </script> <section class="related"> <h3 class="title">最新文章</h3> <ul> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278169.html" title="隐形眼镜润眼液怎么用(隐形眼镜润眼液)" target="_blank" >隐形眼镜润眼液怎么用(隐形眼镜润眼液)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278160.html" title="中意人寿保险怎么样可靠吗(中意人寿保险公司怎么样)" target="_blank" >中意人寿保险怎么样可靠吗(中意人寿保险公司</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278150.html" title="唐山曹妃甸实业港务有限公司招采人电话(唐山曹妃甸实业港务有限公司)" target="_blank" >唐山曹妃甸实业港务有限公司招采人电话(唐山</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278144.html" title="处女座是几月到几月的(处女座是几月到几月)" target="_blank" >处女座是几月到几月的(处女座是几月到几月)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278136.html" title="抗浮锚杆施工方案监理怎么审批的(抗浮锚杆施工方案)" target="_blank" >抗浮锚杆施工方案监理怎么审批的(抗浮锚杆施</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278128.html" title="阿里巴巴的外发加工是真的吗(阿里巴巴外发加工网)" target="_blank" >阿里巴巴的外发加工是真的吗(阿里巴巴外发加</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278118.html" title="书签尺寸多少最好(平时用的书签一般尺寸是多少)" target="_blank" >书签尺寸多少最好(平时用的书签一般尺寸是多</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278099.html" title="江苏省道路运输条例最新版(江苏省道路运输条例)" target="_blank" >江苏省道路运输条例最新版(江苏省道路运输条</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278090.html" title="法律的精神(法律精神是什么)" target="_blank" >法律的精神(法律精神是什么)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278080.html" title="绿河谷贴吧(绿河谷论坛)" target="_blank" >绿河谷贴吧(绿河谷论坛)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278072.html" title="哈尼族的传统节日有哪些?(哈尼族的传统节日)" target="_blank" >哈尼族的传统节日有哪些?(哈尼族的传统节日)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278062.html" title="股份和股权怎么分开(股份和股权)" target="_blank" >股份和股权怎么分开(股份和股权)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278053.html" title="罗浮山下四时春 古诗(罗浮山下四时春)" target="_blank" >罗浮山下四时春 古诗(罗浮山下四时春)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278034.html" title="手工加工活无押金无保证金外发(手工活加工无押金外放)" target="_blank" >手工加工活无押金无保证金外发(手工活加工无</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278025.html" title="宝应县属于哪个市哪个区(宝应县属于哪个市)" target="_blank" >宝应县属于哪个市哪个区(宝应县属于哪个市)</a></li> <li> <div class="thumbnail"> <h4><a href="https://www.jjsx.com.cn/xinwen/202411/1278016.html" title="靓妹" target="_blank" >靓妹</a></li> </ul> </section> </article> </main> <aside class="sidebar"> <section class="widget"> <h3 class="title">热点推荐</h3> <ul class="hotposts"> <li> <h4><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331756.html" title="了不起的修仙模拟器灵石怎么获得" target="_blank">了不起的修仙模拟器灵石怎么获得</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://zixun.jjsx.com.cn/zixun/202502/1331755.html" title="了不起的修仙模拟器灵根种植" target="_blank">了不起的修仙模拟器灵根种植</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://www.jjsx.com.cn/qiche/202502/1331751.html" title="没有声音图标" target="_blank">没有声音图标</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://www.jjsx.com.cn/keji/202502/1331717.html" title="科勒马桶价格表" target="_blank">科勒马桶价格表</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="http://bbs.jjsx.com.cn/hlkpzx/202502/1331715.html" title="开淘宝店的费用" target="_blank">开淘宝店的费用</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://www.jjsx.com.cn/keji/202502/1331710.html" title="开启cookie" target="_blank">开启cookie</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331708.html" title="君莫笑图片" target="_blank">君莫笑图片</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://news.jjsx.com.cn/jing/202502/1331704.html" title="君乐宝乐臻" target="_blank">君乐宝乐臻</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://www.jjsx.com.cn/keji/202502/1331703.html" title="君彩手写板驱动下载" target="_blank">君彩手写板驱动下载</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <h4><a href="https://www.jjsx.com.cn/qiche/202502/1331694.html" title="马自达rx8" target="_blank">马自达rx8</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> </ul> </section> <script> if (!isMobile()){ document.write('<div style="text-align:center;margin-top:5px;"><script>pc_show_right300();<\/script><\/div>'); } </script> <section class="widget"> <h3 class="title">精选文章</h3> <ul class="hotposts"> <li> <div class="thumbnail"><a href="https://zixun.jjsx.com.cn/zixun/202502/1331770.html" title="联想拯救者怎么样" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="联想拯救者怎么样"/></a></div> <h4><a href="https://zixun.jjsx.com.cn/zixun/202502/1331770.html" title="联想拯救者怎么样" target="_blank">联想拯救者怎么样</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="https://baike.jjsx.com.cn/baike/202502/1331768.html" title="联想拯救者y7000评测" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="联想拯救者y7000评测"/></a></div> <h4><a href="https://baike.jjsx.com.cn/baike/202502/1331768.html" title="联想拯救者y7000评测" target="_blank">联想拯救者y7000评测</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="https://news.jjsx.com.cn/jing/202502/1331767.html" title="联想拯救者y7000配置" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="联想拯救者y7000配置"/></a></div> <h4><a href="https://news.jjsx.com.cn/jing/202502/1331767.html" title="联想拯救者y7000配置" target="_blank">联想拯救者y7000配置</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331763.html" title="历年双11成交额" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="历年双11成交额"/></a></div> <h4><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331763.html" title="历年双11成交额" target="_blank">历年双11成交额</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="https://baike.jjsx.com.cn/baike/202502/1331761.html" title="力魔机油" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="力魔机油"/></a></div> <h4><a href="https://baike.jjsx.com.cn/baike/202502/1331761.html" title="力魔机油" target="_blank">力魔机油</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331749.html" title="快点阅读电脑版安装" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="快点阅读电脑版安装"/></a></div> <h4><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331749.html" title="快点阅读电脑版安装" target="_blank">快点阅读电脑版安装</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="https://www.jjsx.com.cn/qiche/202502/1331744.html" title="卖保险为什么不香了?" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="卖保险为什么不香了?"/></a></div> <h4><a href="https://www.jjsx.com.cn/qiche/202502/1331744.html" title="卖保险为什么不香了?" target="_blank">卖保险为什么不香了?</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="https://zixun.jjsx.com.cn/zixun/202502/1331741.html" title="酷狗唱唱电脑版" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="酷狗唱唱电脑版"/></a></div> <h4><a href="https://zixun.jjsx.com.cn/zixun/202502/1331741.html" title="酷狗唱唱电脑版" target="_blank">酷狗唱唱电脑版</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331728.html" title="空气净化系统" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="空气净化系统"/></a></div> <h4><a href="http://bbs.jjsx.com.cn/kjsd/202502/1331728.html" title="空气净化系统" target="_blank">空气净化系统</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> <li> <div class="thumbnail"><a href="https://www.jjsx.com.cn/keji/202502/1331724.html" title="空气净化器价格" target="_blank"> <img class="lazyload" src="https://www.jjsx.com.cn/Statics_n/picture/grey.gif" data-src="https://www.jjsx.com.cn/statics/images/nopic.gif" alt="空气净化器价格"/></a></div> <h4><a href="https://www.jjsx.com.cn/keji/202502/1331724.html" title="空气净化器价格" target="_blank">空气净化器价格</a></h4> <p><i class="far fa-clock"></i> <time> 2025-02-11</time> </p> </li> </ul> </section> </aside> </div> <script> if (isMobile()){ document.write('<script>wap_show_button_under();<\/script>'); document.write('<script>wap_show_button_float();<\/script>'); } </script> <style> @media screen and (max-width:959px){ .copyright-link{display:none} } </style> <footer id="footer"> <div class="backtop"><i class="fas fa-angle-up"></i></div> <div class="copyright"> <p>免责声明:本网站部分内容转摘互联网,如权利人发现存在侵犯版权问题,请及时与本站联系删除, </p> <p>Copyright Rights Reserved .<a href="https://www.jjsx.com.cn">环球知识网</a> .   <a href="https://www.jjsx.com.cn/ditu.html">网站地图</a><span>|</span> <a href="https://www.jjsx.com.cn/sitemaps.xml">百度地图</a> <a href="https://www.jjsx.com.cn/sitemaps_360_all.xml" target="_blank">360地图</a> <span>|</span> <a href="https://www.jjsx.com.cn/about.html">关于我们</a> | <a href="https://www.jjsx.com.cn/jrgx/" target="_blank" style="display:none;">今日更新</a></p> </div> </footer> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JdzQo1wT9agzA0q9",ck: "JdzQo1wT9agzA0q9"})</script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script type="text/javascript" src="https://www.jjsx.com.cn/Statics_n/js/leonhere.js"></script> <script type="text/javascript" src="https://www.jjsx.com.cn/Statics_n/js/lazyload.min.js"></script> <script type="text/javascript" src="https://www.jjsx.com.cn/Statics_n/js/owl.carousel.min.js"></script> <!--360自动收录--> <script> (function(){ var src = "https://s.ssl.qhres2.com/ssl/ab77b6ea7f3fbf79.js"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?bc57e2ff17f8865d89fab260a5937fa54ab027eddfd5990aba72cae1812003bd30632485602430134f60bc55ca391050b680e2741bf7233a8f1da9902314a3fa"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>