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について多くを知らないで、私はそのI考えていましたポートレットの先頭から指定された高さに背景色を追加する必要があります（.portlet）。私はこれを動作させるために追加のdivまたはスパンを追加する必要があるかもしれませんが、これを取り除くことができる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; 
    }