CSS背景图像未显示答案

【问题标题】：CSS background image is not showingCSS背景图像未显示
【发布时间】：2018-08-29 03:41:55
【问题描述】：

CSS 背景图片未显示。这是我的html代码：

<div  class="container-fluid p-c b-g">
  <div class="row">
    <div class="col-sm-12 text-infom">

    </div>
    </div>  
  </div>
</div>

css代码

.b-g{
   background-image: url(../images/bg/trading.jpg);
    width: 100%;
}

【问题讨论】：

您好，您是否使用浏览器检查器检查图像是否已加载？可能图像的路径是错误的
'localhost/crypto/images/bg/trading.jpg' 当我将此路径放入浏览器图像时，我显示这意味着图像的路径是正确的
其他类的代码是什么？ container-fluid, p-c, row, col-sm-12 text-infom?
但是当您检查元素时，您可以查看是否加载了图像，如果没有看到错误，请检查。
最好将高度 200px 添加到类 text-infom。如果没有任何内容，所有 div 的高度将为 0。

标签： html css bootstrap-4

【解决方案1】：

为 div 添加一些高度，它会显示

.b-g{
  background-image: url(https://pbs.twimg.com/profile_banners/1285511592/1470391779/1500x500);
  background-size: contain;
  background-repeat: no-repeat;
  height: 300px;
}

<div  class="container-fluid p-c b-g">
  <div class="row">
    <div class="col-sm-12 text-infom">

    </div>
   </div>  
</div>

【讨论】：

【解决方案2】：

可能是你保存的文件路径错误，通过浏览器检查检查文件加载与否。

<style type="text/css">
.b-g {
   background-image: url("http://tipsforbeauties.com/gallery_gen//5c5f13b27a80afa16ca4184aec9a26c1_324.7619047619x220.jpg");
   width: 100%;
}
</style>
<div class="b-g">
</div>

【讨论】：

【解决方案3】：

为了使图像适合背景（元素、主体或其他）：

.b-g {
    padding: 0px;
    background-image: url(../images/bg/trading.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

或者您可以添加background-size 属性（删除width 属性）。

background-size: 100% 100%;

最后一个你可以这样使用：

background-image: #000 url('../images/bg/trading.jpg') repeat center center;

【讨论】：