Question

专家！我确实需要在面板标题中添加一些图像作为bg。我也希望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颜色。

Answer 1

将background-image更改为background，然后将!important添加到该行的末尾（分号前）。

background: url(../img/flowerbg.svg) no-repeat !important;

jsFiddle：http://jsfiddle.net/shrmn/79crb7j9/

Answer 2

尝试从背景图像中删除无重复：）

no-repeat属于自己的属性“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>

如何在面板标题中添加响应式背景图像。 Twiitter Bootstrap 3

2 个答案: