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

标签 html css twitter-bootstrap twitter-bootstrap-3

伙计们! 我确实需要将一些图像作为背景添加到我的面板标题中。我也想要 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/

相关文章:

javascript - 是否可以使用 JavaScript 实现剪贴板管理器?

javascript - 使用ajax和php将数据显示到html表时遇到问题

css - 将 CSS 应用于 JQGrid 中的表格单元格(td)?

html - 为什么我的按钮插件比我的文本输入大?

Bootstrap 按钮插件中的 jQuery 单击事件

jquery - 我怎样才能使这个冗长的 jquery 优雅化?

javascript - 不加载外部 JS 文件

css - 移动设计

javascript - Picturefill 的响应链接源

php - 如何使用 ajax 自动完成 bootstrap tokenfield?