Bootstrap Portlet CSS Tweak

Question

我正在使用我发现的代码片段来创建port-lets（有点像面板）。

这并没有明确的标题，但我试图看看是否可以添加任何css来创建一个。

  <div class="portlet">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="glyphicon glyphicon-calendar"></i>
                            <span class="caption-subject text-uppercase"> Portlet</span>
                            <span class="caption-helper">weekly stats...</span>
                        </div>
                        <div class="actions">
                            <a href="javascript:;" class="btn">
                                <i class="glyphicon glyphicon-pencil"></i>
                                Edit 
                            </a>
                            <a href="javascript:;" class="btn">
                                <i class="glyphicon glyphicon-paperclip"></i>
                                Add
                            </a>
                            <a href="javascript:;" class="btn btn-circle">
                                <i class="glyphicon glyphicon-resize-full"></i>
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>Heading Text</h4>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                    </div>
                </div>

这是CSS：

.content {
    padding: 30px;
    background: #f1f3fa;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

/* Portlet */
.portlet {
    background: #fff;
    padding: 20px;
}

.portlet.portlet-gray {
    background: #f7f7f7;
}

.portlet.portlet-bordered {
    border: 1px solid #eee;
}

/* Portlet Title */
.portlet-title {
    padding: 0;
    min-height: 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 18px;
}

.caption {
    float: left;
    display: inline-block;
    font-size: 18px;
    line-height: 18px;
}

.caption i {
    color: #777;
    font-size: 15px;
    font-weight: 300;
    margin-top: 3px;
}

.caption-subject {
    color: #666;
    font-size: 16px;
    font-weight: 600;
}

.caption-helper {
    padding: 0;
    margin: 0;
    line-height: 13px;
    color: #9eacb4;
    font-size: 13px;
    font-weight: 400;
}

/* Actions */
.actions {
    float: right;
    display: inline-block;
}

.actions a {
    margin-left: 3px;
}

.actions .btn {
    color: #666;
    padding: 3px 9px;
    font-size: 13px;
    line-height: 1.5;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 50px;
}

.actions .btn i {
    font-size: 12px;
}

.actions .btn:hover {
    background: #f2f2f2;
}

/* Inputs */
.inputs {
    float: right;
    display: inline-block;
    padding: 4px 0;
    margin-top: -10px;
}

.input-inline {
    width: 240px;
    display: inline-block;
    vertical-align: middle;
}

/* Btn Circle */
.actions .btn.btn-circle {
    width: 28px;
    height: 28px;
    padding: 3px 7px;
    text-align: center;
}

.actions .btn.btn-circle i {
    font-size: 11px;
}

JS小提琴：https://jsfiddle.net/dmz9xxr2/

我尝试了什么：

由于对CSS不太了解，我想我必须从portlet（.portlet）的顶部开始向指定的高度添加背景颜色。我可能需要添加一个额外的div或span来使其工作，但想看看是否有任何css技巧可以解决这个问题。

结束目标：

Answer 1

您可以使用伪元素，即::before。

Updated fiddle

.portlet {
  position: relative;
  background: #fff;
  padding: 20px;
  z-index: 1;
}
  .portlet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 59px;
    background: steelblue;
    z-index: -1;
  }