使用CSS在div之前和之后使用不同的颜色

Question

对于一个网站,我试图让容器前的元素以与容器后面的元素不同的颜色显示.我想得到以下结果:

我试过这个:CSS:之前:在背景颜色之后.还有很多其他的东西,但这一切都没有成功.我最终得到以下代码:

.section {
  width: 100%;
}

.section .container {
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.section .container::before {
  background-color: red;
  content: ' ';
}

.section .container::after {
  background-color: blue;
  content: ' ';
}

.section .container h1 {
  padding: 10px;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

结果只是白色.

Answer 1

这是一个更容易理解背景着色的想法:

.section {
  background:linear-gradient(to right,red 50%,blue 0);
}

.section .container {
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.section .container h1 {
  padding: 10px;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

您仍然可以只使用一个容器和多个背景来优化更多:

.container {
  background:
   linear-gradient(#fff,#fff) center/250px 100% no-repeat,
   linear-gradient(to right, red 50%, blue 0);
  text-align: center;  
  padding:10px 0;

}

.container h1 {
  margin:0 auto;
  max-width:250px;
}

<div class="container">
  <h1>Hello world.</h1>
</div>

透明度的另一种方式:

.container {
  background:
   linear-gradient(red,red) left,
   linear-gradient(blue,blue) right;
  background-size:calc(50% - (250px/2)) 100%;
  background-repeat:no-repeat;
  text-align: center;  
  padding:10px 0;
}

.container h1 {
  margin:0 auto;
  max-width:250px;
}

body {
 background:pink;
}

<div class="container">
   <h1>Hello world.</h1>
</div>

透明的另一种语法:

.container {
  background:
   linear-gradient(to right,
    red calc(50% - (250px/2) - 1px),transparent calc(50% - (250px/2)),
    transparent calc(50% + (250px/2)),blue calc(50% + (250px/2) + 1px));
  text-align: center;  
  padding:10px 0;
}

.container h1 {
  margin:0 auto;
  max-width:250px;
}

body {
 background:pink;
}

<div class="container">
   <h1>Hello world.</h1>
</div>

Answer 2

我已使用:before和更新了这个:after,使用下面的代码:

.section {
  width: 100%;
  position: relative;
}

.section .container {
  background-color:#fff;
  width: 250px;
  margin: 0 auto;
  text-align:center;
}
.section .container::before {
    background-color: red;
    content: ' ';
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
}
.section .container::after {
  background-color: blue;
  content: ' ';
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: -1;
    top: 0;
}

.section .container h1 {
  padding: 10px;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>