div背景颜色不显示

div背景颜色不显示

#.bg{

width:100%;

height:100%

background-color#09203D; 设置了背景颜色 但是页面上没有显示

}

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

 <div class="bg">

    ​<div class="***"></div>

</div>

在这里输入代码,可通过选择【代码语言】突出显示

正在回答

登陆购买课程后可参与讨论,去登陆

5回答

同学你好,对于你的问题解答如下:

  1.  粘贴的代码中并没有给.bg元素设置高度,默认高度为0 ,导致无法显示背景颜色。

  2. 老师需要跟同学确认一下,在main.js中引入了login.css文件吗?如果引入了的话,那么从截图来看,引入图片的路径是正确的。如果没有引入的话,需要引入一下login.css文件哦。示例:

    http://img1.sycdn.imooc.com//climg/5fb5ef48097efea603610044.jpg

  3. 背景图片无法显示,还是因为div的高度问题,同学粘贴的部分代码中,虽然给bg的父级元素设置了height属性,但属性值使用的百分比,还是会参考它的父级元素设置的height属性进行计算,所以只要是bg的某一个祖先元素没有设置height属性,就可能导致无法实现效果。

  4. 老师猜测同学应该想要设置一个全屏的背景颜色,对吗?如果是这样的话,那么可以给bg设置为固定定位,让它参考窗口定位,使用top/right/bottom/left和margin属性,铺满全屏显示。示例:

    http://img1.sycdn.imooc.com//climg/5fb5ef0b0916d60108820337.jpg

    http://img1.sycdn.imooc.com//climg/5fb5ef18098ca7e819200912.jpg

本站的教学服务只包含站内视频内容问题解答、站内习题问题解答、站内作业问题解答、站内测试题问题解答以及站内产品使用问题解答。


由于不清楚同学完整详细代码具体怎么写的,哪里引入的login组件,而且同学粘贴的代码也不属于课程中的,所以可能无法非常准确的帮助同学解答。同学现在还刚入门,掌握的技术还不够全面,基础相对比较薄弱,不适合做复杂的课外练习。建议同学自行完成与自身能力相匹配的拓展练习。并且合理安排时间,把学习的重点放在课程内容本身。打好基础,再去做这个练习,就能轻松独立完成了。

祝学习愉快~

  • 精慕门2488381 提问者 #1
    谢谢解答!通过您的讲解,背景颜色的问题我已经理解了。我在main.js里面引入了login.css,引入路径跟您截图上一样,但是背景图片还是显示不出来,请问怎么才能显示呢?
    2020-11-19 14:14:37
  • 精慕门2488381 提问者 #2
    现在已经可以显示出我想要的效果,谢谢您的耐心解答!
    2020-11-19 14:30:07
提问者 精慕门2488381 2020-11-19 10:51:57


二、login.css

.bg {

  background-color#09203D;

  /* background-image: url(../../static/pictures/background.png); */

  /* background-size: cover; */

  background-repeatno-repeat;

}

  .square {

    /* 居中 */

    positionfixed;

    top28%;

    left0;

    right0;

    margin:0 auto;

    /* 大小颜色 */

    width660px;

    height440px;

    backgroundrgba(17561000.6);

    border-radius5px;

  }


  .login-title {

    font-size50px ;

    color:#ffffff;

    text-aligncenter;

  }


  .inpt-butn {

    height190px;

    margin-top60px;

  }


  .info {

    width420px;

    height48px;

    left0;

    right0;

    margin0 auto 24px;

    text-aligncenter;

  }


  .info-text {

    width400px;

    line-height44px;

    bordernone;

    border-radius4px;  /*写在info中不生效*/

    padding-left8px;

    font-size20px;

  }


  .butn-position {

    width400px;

    height50px;

    left0;

    right0;

    margin24px auto 0;

  }


  .butn {

    width160px;

    floatleft;

    left0;

    right0;

    margin22px 20px 0;

  }


  .butn-text1 {

    width160px;

    height48px;

    border-radius4px;

    font-size20px;

    bordernone;

  }

  .butn-text2 {

    width160px;

    height48px;

    border-radius4px;

    font-size20px;

    bordernone;

  }

  /* hover写在butn里没有效果 */

  .butn-text1:hover {

    background-color#DD0505;

  }

  .butn-text2:hover {

    background-color#1AAD19;

  }


  .copy {

    text-aligncenter;

    color#ffffff;

    font16px;

    margin-top40px;

  }


三、文件夹目录

http://img1.sycdn.imooc.com//climg/5fb5dc5a09c23fd403010748.jpg


在.bg外层加div 并设置style,背景颜色也不显示。设置背景图片,图片也不显示。

好帮手慕慕子 2020-11-18 18:35:11

同学你好,把背景颜色改成背景图片,图片不显示,可能是由于引入图片的地址不对,同学检查下书写的地址是否正确。

如果自己排查不了,可以将你写的完整代码全部粘贴过来,并将你的文件夹目录截图粘贴过来,代码不要截图哦,便于帮助同学准确的定位与解决问题。

祝学习愉快~

  • 提问者 精慕门2488381 #1
    一、LogIn.vue <template> <div style="height:100%"> <div class="bg"> <div class="square"> <form> <h3 class="login-title">阿里巴巴</h3> <div class="inpt-butn"> <div class="info"> <input class="info-text" type="text" name="username" placeholder="用户名"> <br> </div> <div class="info"> <input class="info-text" type="password" name="password" placeholder="密码"> <br> </div> <div class="butn-position"> <div class="butn"> <input class="butn-text1" type="reset" name="reset" value="注销"> </div> <!-- 点击登录后跳转到首页 --> <router-link to="/firstpage"> <div class="butn"> <input class="butn-text2" type="submit" name="submit" value="登录"> </div> </router-link> </div> </div> <p class="copy">CoryRight&copy;&nbsp;&nbsp;阿里巴巴股份有限公司</p> </form> </div> </div> </div> </template> <script> export default { name: 'LogIn', } </script> <style> </style>
    2020-11-19 10:51:38
  • 提问者 精慕门2488381 #2
    剩下的内容在回答里
    2020-11-19 10:53:04
  • 提问者 精慕门2488381 #3
    麻烦帮我看看问题出在哪里
    2020-11-19 10:53:44
提问者 精慕门2488381 2020-11-18 16:13:18

在父元素上添加height100%后背景颜色可以显示了。但是把背景颜色改成背景图片,图片又不显示了。应该怎么办呢?

好帮手慕慕子 2020-11-18 15:51:10

同学你好, 由于子元素设置的height属性设置百分比时,是参考父元素设置的height属性值进行计算的,如果父元素没有设置height属性值,那么子元素以百分百设置的高度为0。

从同学粘贴的部分代码,猜测可能是由于.bg元素的父元素没有设置height属性值,导致.bg的高度为0,所以设置的背景颜色不显示。建议:可以给.bg元素的的父元素添加一个固定height属性后再测试下效果。

如果还有问题,可以将你写的完整代码全部粘贴过来,便于帮助同学准确的定位与解决问题。

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师