将背景扩展到网格基础之外

Question

有没有办法将背景延伸到网格的左侧或右侧？例如，如果我想做一个带有网格的 100% 背景，我会做类似的事情：

<div class="100%BACKGROUND">
    <div class="row>
        <div class="large-12 columns>
        </div>
    </div>
</div>

哪个工作得很好，但是如果我想将网格外的背景颜色扩展到页面的一侧，我的意思是例如

<div class="row>

     <div class="large-8 columns">

     </div>

     <div class="BACKGROUNDSTART"> <-- background start

     <div class="large-4 columns">

     </div>

 </div>

 </div> <-- background end 

现在这显然不起作用，但这是我试图实现的那种东西，它是一个看起来如何的模型。

Answer 1

这可以通过伪元素实现，如下所示：

代码笔演示

基本的HTML结构

<div class="container">
  <div class="level"></div>
  <div class="level">
    <div class="split"></div>
    <div class="split purple"></div> /* div to be extended */
  </div>
  <div class="level"></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
}
.container {
  width:960px;
  margin: 0  auto;

}
.level {
  height:100px;
  background: #bada55;
  clear:both;
  border:1px solid black;
}

.split {
  width:50%;
  height:100%;
  float:left;
}

.purple {
  position: relative;
  background: #663399;
  opacity:0.5; /* just for visibility of effect */
}


.purple:after {
  content: "";
  position: absolute;
  background: #663399;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
} 

.purple:after {
  left: 100%;
}