如何用不同的颜色左右扩展包裹的元素背景？

Question

我正在尝试使用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>

.flash-banner DIV以页面为中心。所以我需要用两种颜色填充这个DIV的左右空间。

检查此图片是否清楚明白：

这是我试过的方式。但我还是无法解决这个问题。

.top-banner {
    text-align: center;
}

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

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

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

希望有人可以帮助我。谢谢。

Answer 1

我把你的代码放在jsfiddle中并添加一些css规则以获得最小的示例工作。

HTML：

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

CSS：

.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;
}

检查：https://jsfiddle.net/lmgonzalves/vwty760m/

Answer 2

我已调整了您的:before和:after，因此他们会在Flash横幅广告后面填充并填充100％。

您需要做的就是更改.flash-banner。

的大小

.top-banner {
  text-align: center;
  width: 100%;
  position: relative;
}

.flash-banner {
  height: 121px;
  width: 300px;
  background: blue;
  margin: auto;
  z-index: 1;
}

.flash-banner:before,
.flash-banner:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background: red;
  z-index: -1;
}

.flash-banner:after {
  background: green;
  right: 0;
  left: auto;
}

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

Answer 3

试试这个

.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;
}