CSS背景图像不显示

92dk7w1h  于 2023-04-08  发布在  其他
关注(0)|答案(3)|浏览(140)

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%;
}
9udxz4iz

9udxz4iz1#

添加一些高度到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>
cmssoen2

cmssoen22#

可能是你保存的文件路径错误,请在浏览器中检查文件是否加载。

<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>
l5tcr1uw

l5tcr1uw3#

使图像适合背景(元素、主体或其他):

.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;

相关问题