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

最新推荐文章于 2024-04-02 21:14:25 发布

丫呀nice

最新推荐文章于 2024-04-02 21:14:25 发布

阅读量976

点赞数

分类专栏： CSS 笔记

本文链接：https://blog.csdn.net/weixin_46100406/article/details/106398321

版权

笔记同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

CSS

24 篇文章 0 订阅

订阅专栏

vue的图片渲染问题：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>

效果图
在这里插入图片描述