Html 如何使用不同的颜色扩展左、右包装的元素背景？

我试图使用CSS将一个包装的元素扩展到整个浏览器宽度：

：before

和

：after

伪元素

这是我的HTML：

 <section class="top-banner">
  <div class="flash-banner">  
    <object width="1003" height="121">
      <param name="movie" value="img/banner_header.swf">
      <embed src="img/banner_header.swf" width="1003" height="121">
      </embed>
    </object>
  </div>
</section>

---

希望有人能帮助我。多谢各位

我将您的代码放在JSFIDLE中，并添加一些css规则，以使最小的示例工作

HTML:

检查：

试试这个

.flash-banner:before, 
.flash-banner:after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  z-index:-1;
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

.flash-banner:after { 
  left: 0;
  background: red;
}

---

我已经调整了你的

：before

和

：after

，所以他们在flash横幅后面运行并100%填充

您只需更改

.flash横幅的大小即可


.top横幅{
文本对齐：居中；
宽度：100%；
位置：相对位置；
}
.闪光旗帜{
高度：121px；
宽度：300px；
背景：蓝色；
保证金：自动；
z指数：1；
}
.闪光横幅：之前，
.闪光横幅：之后{
内容：“；
位置：绝对位置；
宽度：50%；
身高：100%；
左：0；
背景：红色；
z指数：-1；
}
.闪光横幅：之后{
背景：绿色；
右：0；
左：自动；
}


<section class="top-banner">
  <div class="flash-banner">
  </div>
</section>

.top-banner {
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.flash-banner {
    background: #2D3447;
    height: 121px;
    width: 50px;
    position: relative; 
  margin: 0 auto;
  padding: 0.25rem 30px;
  background: #333;
}

.flash-banner:before, 
.flash-banner:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: red;
}

.flash-banner:after { 
  width: 9600px;
  left: 100%;
  background: green;
}

.flash-banner:before, 
.flash-banner:after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  z-index:-1;
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

.flash-banner:after { 
  left: 0;
  background: red;
}