使用背景图片显示不出来，也不报错的原因

超、凢脫俗 2023-02-13 08:52 5阅读 0赞

vue的图片渲染问题：[https://blog.csdn.net/weixin\_46100406/article/details/106522949][https_blog.csdn.net_weixin_46100406_article_details_106522949]

图片上面写文字（推荐使用背景图片；不推荐relative与absolute）

**使用背景图片显示不出来，也不报错的原因：**  
可能是因为没有包裹一层div

**注意事项：**

*  背景图片div必须要包裹一层div才会显示
 *  jpg格式，png格式都可以使用

开始用的relative与absolute不太好调整，后来用背景图片就好设置了。  
**background: url(…/images/round-orange.png) no-repeat;**  
…/images/round-orange.png是本地地址  
不加no-repeat的话会出现重复图片不容易去掉

/*css部分：*/
    .round-text-box {
      width: 120px;
      height: 90px;
    }
     .round-text-box .round-text-yellow{
      color: white;
      margin: 0 auto;
      text-align: center;
      /* no-repeat 背景图片不重复！！！！！！！！！ */
      background: url(../images/round-orange.png) no-repeat;
      width: 90px; 
      height: 90px;
      border-radius: 90px;
    }
    
    /*body部分：*/
    <div class="round-text-box">
         <div class="round-text-yellow" >
             <div style="font-size: 12px;">活力排名</div>
             <div id="hlpm3">16/300</div>
         </div>
     </div>

效果图  
![在这里插入图片描述][20200528102930944.png]

[https_blog.csdn.net_weixin_46100406_article_details_106522949]: https://blog.csdn.net/weixin_46100406/article/details/106522949
[20200528102930944.png]: https://img-blog.csdnimg.cn/20200528102930944.png