背景颜色不同在容器的两边

Question

我希望能够将超出其容器的两个div背景扩展到页面的左侧和右侧，同时内容保留在容器中。到目前为止我有。我应该使用变换将两个div扩展到页面的边缘吗？感谢

<div class="container">
<div class="col-lg-4 left"><p>View our rewards scheme</p></div>
<div class="col-lg-4 center"><p>View our latest offers</p></div>
<div class="col-lg-4 right"><p>We're hiring apply now</p></div>
</div>

Answer 1

扩展背景色的外观可以使用CSS伪元素完成..

<s:decorate id="acctHldrBthDtField" template="/layout/edit.xhtml">
    <ui:define name="label">Account Holder Birth Date</ui:define>
      <rich:calendar id="acctHldrBthDt"
          value="#{P18SlipHome.instance.acctHldrBthDt}"
          datePattern="dd-MMM-yyyy" enableManualInput="true" 
          onfocus="saveCurrentFocus(this);" >
          <a:support event="onblur" reRender="acctHldrBthDtField" ajaxSingle="true"/>
          <a:support event="oninputblur" reRender="acctHldrBthDtField" ajaxSingle="true"/>
     </rich:calendar><br/>Date format must be dd-Mmm-yyyy
</s:decorate>

演示：http://www.codeply.com/go/gHFYUnX6hE

Answer 2

不，背景不能超越他们的容器。

溢出样式控制当内容大于元素的指定大小时元素的反应。

Answer 3

据我所知，你无法将你的背景扩展到容器的边界之外......但是，你可以使用box-shadow属性（css）

MDN: box-shadow