css设置背景图片不显示问题

2024-12-19 07:47:45
推荐回答(5个)
回答1:

代码编写有问题。

解决的方法和详细的操作步骤如下:

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%2Faa18972bd40735fa04a88bc58e510fb30f240876%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/aa18972bd40735fa04a88bc58e510fb30f240876"></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p>4、第一步,执行完上面的操作之后,保存html代码,使用浏览器将其打开,这时,滚动浏览器滚动条,发现背景图像与浏览器滚动条的滚动一起滚动,见下图,转到下面的步骤。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F810a19d8bc3eb1359d9f72c7b61ea8d3fd1f4476%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/810a19d8bc3eb1359d9f72c7b61ea8d3fd1f4476"></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p>5、第一步,执行完上面的操作之后,使用“background-attachment: fixed”设置为不使用滚动条滚动的问题,返回html代码页并添加“background-attachment: fixed”即可,见下图。这样,以上的问题就解决了。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fe61190ef76c6a7ef427e6d5aedfaaf51f3de6676%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/e61190ef76c6a7ef427e6d5aedfaaf51f3de6676"></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、打开html开发软件,新建一个html代码页面。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F77094b36acaf2edd3a79ac78831001e938019393%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/77094b36acaf2edd3a79ac78831001e938019393"></p> <p>2、在html代码页面的<body>标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F377adab44aed2e73bffd7dbd8901a18b87d6fa0f%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/377adab44aed2e73bffd7dbd8901a18b87d6fa0f"></p> <p>3、设置背景图片样式。在<title>标签后面创建一个<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">回答3:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p><p>背景图片不显示的问题。可能有以下几个原因:</p> <ol> <li><p>图片路径不正确。找不到图片当然不显示。</p></li> <li><p>背景元素没有宽度和高度。当元素没有宽高时,背景是显示不出来的。背景不会撑开元素。</p></li> <li><p>css代码写错了。错误的写法,当然显示不了。</p></li> <li><p>忘记给需要显示背景的元素增加有背景的css类(估计没人会犯这错,但还是提出来吧)</p></li> <li><p>元素不具备块属性。当元素不具有块属性的时候设置的高宽是无效的。所以也不会显示图片</p></li> <li><p>被同名css类的样式所覆盖。假设前面有命名.bg设置了background显示图片,后面又命名了.bg又设置了background显示颜色。</p></li> </ol> <p>根据经验,最大的可能就是第2点和3点</p> <p>正确的示例</p> <pre t="code" l="css">.bg {<br>    width: 400px;<br>    height: 400px;<br>    display: block;<br>    background: url( 图片地址 );<br>}</pre></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>1、css没有被调用;请检查css调用是否成功,<br><br>2、div设置错误容易导致背景图片高度太大则无法显示,<br><br>3、可以查看url路劲是否写对,background-image:url("../img/background.gif");<br>4、设置background-size,<br>5、div盒子没有内容,需要设置width、height,<br>6、元素一定要是块级元素;<br>7、打开控制台(按F12键)查看下CSS样式background-image;</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><ol> <li><p>css设置背景用的background,书写方式是.div{backgroud:url('1.jpg');},你看一下你的css写对了没有</p></li> <li><p>图片不显示,还可能是因为图片的存放位置不对,如果你不清楚图片放在哪个文件夹应该怎么写,可以html文件跟图片放在一起,直接写backgroud:url('1.jpg');</p></li> </ol></p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/329138183.html" title="Css设置背景图片不显示的问题">Css设置背景图片不显示的问题</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/238375245.html" title="为什么我在css中设定的背景图片在浏览的时候不显示?">为什么我在css中设定的背景图片在浏览的时候不显示?</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/758123136804481244.html" title="为什么我在css中设定的背景图片在浏览的时候不显示?">为什么我在css中设定的背景图片在浏览的时候不显示?</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/86986778.html" title="DIV+CSS中设置了一个背景图片,显示不出来">DIV+CSS中设置了一个背景图片,显示不出来</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/1754538064892817308.html" title="div+css布局 设置的背景图片显示不出来">div+css布局 设置的背景图片显示不出来</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/2080266437248503948.html" title="css插入背景图片时背景图片显示不出是什么原因?">css插入背景图片时背景图片显示不出是什么原因?</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/63087429.html" title="div+css中背景图片显示不出来">div+css中背景图片显示不出来</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/1761169435880317588.html" title="前端,css设置背景图片不能在浏览器显示">前端,css设置背景图片不能在浏览器显示</a></div> <div class="wdxgfbxinxi pcnone "></div> </div> </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/index.php/373161381412193924.html">如何在新课改中搞好小学低年级语文识字教学</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/1434126265158072019.html">我今天见了一个相亲对象,他不怎么说话,双方留了手机号码,后来他加我微信,又不说话,是什么意思啊</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/318098421.html">在word2003中如何一下子全部删除衬于文字下方的图片</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/622375621817680492.html">从斗门派出所到市便民服务中心怎么坐公交车,最快需要</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/312504423.html">办公室弱电机房为什么要配置空调</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/348289482.html">我是一名高二学生,由于种种原因被学校开除了,我对自己以后失去了信心,没有脸再去面对我的家人,现在...</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/159636217.html">姓赵的女孩带茜字的有什么好名字</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/210885672.html">豹龟,赫曼,缅甸陆龟、欧陆、星龟、苏卡达、靴龟、四爪那种陆龟领地意识比较强,爱咬其它龟</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/302402656.html">这是什么型的腿啊?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/index.php/2266892978903113788.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>