伙计们! 我确实需要将一些图像作为背景添加到我的面板标题中。我也想要 h3 在里面。 这是我的代码:
<div class="row col-wrap">
<div class="col-lg-4 col">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Simple</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item alert alert-success">Smth
<span class="glyphicon glyphicon-ok pull-right"></span></li>
<li class="list-group-item alert alert-danger">smth1
<span class="glyphicon glyphicon-remove pull-right"></span></li>
<li class="list-group-item alert alert-danger">Smth2<span class="glyphicon glyphicon-remove pull-right"></span></li>
<li class="list-group-item alert alert-danger">Smth3<span class="glyphicon glyphicon-remove pull-right"></span></li>
<li class="list-group-item alert alert-danger">Smth4<span class="glyphicon glyphicon-remove pull-right"></span></li>
</ul>
</div>
<div class="panel-footer clearfix">
<h5 class="col-lg-6 col-xs-6">19 999р.</h5>
<button class="btn btn-success pull-right col-lg-6 col-xs-6" type="submit" data-toggle="modal" data-target="#standartCta">Choose</button>
</div>
</div>
</div>
这是 CSS:
.panel-heading{
background-image: url(../img/flowerbg.svg) no-repeat;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
没有任何反应。 Bg 仍然充满了默认的 Bootstrap 颜色。
最佳答案
尝试从背景图像中删除不重复 :)
不重复属于它自己的属性“background-repeat”,除非你切换到纯背景语句然后按照其他答案:)
作为引用,您可能想查看一些关于速记 css 声明的文档:) https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
.panel-heading {
background-image: url(https://c2.staticflickr.com/6/5551/15140731082_a2c3a4a2c4_n.jpg);
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row col-wrap">
<div class="col-lg-4 col">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Simple</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item alert alert-success">Smth
<span class="glyphicon glyphicon-ok pull-right"></span>
</li>
<li class="list-group-item alert alert-danger">smth1
<span class="glyphicon glyphicon-remove pull-right"></span>
</li>
<li class="list-group-item alert alert-danger">Smth2<span class="glyphicon glyphicon-remove pull-right"></span>
</li>
<li class="list-group-item alert alert-danger">Smth3<span class="glyphicon glyphicon-remove pull-right"></span>
</li>
<li class="list-group-item alert alert-danger">Smth4<span class="glyphicon glyphicon-remove pull-right"></span>
</li>
</ul>
</div>
<div class="panel-footer clearfix">
<h5 class="col-lg-6 col-xs-6">19 999р.</h5>
<button class="btn btn-success pull-right col-lg-6 col-xs-6" type="submit" data-toggle="modal" data-target="#standartCta">Choose</button>
</div>
</div>
</div>
关于html - 如何在面板标题中添加响应式背景图像。推特 Bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32961058/