我是代码点火器的初学者,我将图片的位置保存在数据库中。在这里,我想在div中使用背景网址显示它。我的问题是它没有出来,当我复制位置并将其粘贴到浏览器中时,图片就出来了。
我是参考:<div class="patient-pic" style="background-image: url([::1]/clinic/asset/uploaded_images/togoru.jpg)"></div>
这是我的代码:
<div class="col-sm-10">
<div class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<h4><a data-toggle="collapse" href="#patientinfo">#1 Taguro <span class="fa fa-arrow-circle-o-down pull-right"></span></a></h4>
</div>
<!-- panel-heading -->
<div id="patientinfo" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-sm-4">
<button class="btn btn-success btn-sm">Check me up</button>
</div>
<!-- col-sm-4 -->
<div class="col-sm-6">
<div class="img-patient">
<div class="patient-pic" style="background-image: url([::1]/clinic/asset/uploaded_images/togoru.jpg)"></div>
</div>
<!-- img-patient -->
</div>
<!-- col-sm-6 -->
</div>
<!-- row -->
</div>
<!-- panel-body -->
</div>
<!-- panel-collapse -->
</div>
<!-- panel -->
</div>
<!-- panel-group -->
</div>
<!-- col-sm-10 -->
</div>
<!-- queue -->
</div>
<!-- col-title -->
</div>
</div>
<!-- row -->
这是我的css:
.img-patient {
display: block;
width: 100%;
overflow: hidden;
text-align: center;
}
.patient-pic {
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
border-radius: 50%;
margin: 20px auto;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}