50-50分割背景，顶部覆盖居中图层

Question

我正在尝试执行以下操作： - 添加左背景，50％宽度（红色）。 - 添加正确的背景，50％宽度（绿色）。 - 为内容添加居中图层（必须用另一个图层包装）。   （包装蓝，内容白）。

我稍后会改变背景，但我需要一个50-50分割背景，每一面背景图像不同，顶部有一个居中图层。

任何改进或建议？ ：）

以下代码：

＆＃13;

＆＃13;

   
    /* By forcing `height: 100%` in the html
    and body tag will make sure there are no white areas
    in vicinity (this is optional though, use it only if you need it */
    html, body {height: 100%;}
    
    /* -------------------------------------------- */
    
    div
    {
    border: 1px solid black;
    }
    
    div#wd_bg_left
    {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    background-color: red;
    z-index: 1;
    }
    
    div#wd_bg_right
    {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    background-color: green;
    z-index: 1;
    }
    
    div#wd_wrapper_1
    {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5%;
    right: 5%;
    background-color: blue;
    z-index: 2;
    
    }
    
    div#wd_wrapper_2
    {
    margin: 5px auto 5px auto;
    min-height: 99%;
    background-color: white;
    width: 1000px;
    }
    
   

＆＃13;

  
    <div id="wd_bg_left"></div>
    <div id="wd_bg_right"></div>
    <div id="wd_wrapper_1">
    <div id="wd_wrapper_2"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果只需要颜色，那么简单的线性渐变就足够了。

$vmNames

html, body {
  height:100%;
  margin:0;
}
body {
  min-height:100%;
  background:linear-gradient(to right, red, red 50%, blue 50%);
  }

.container {
  height:100%;
  width:50%; /* your width here */
  margin:auto;
  border:1px solid green;
  }

如果你想要背景图片，可以使用几个伪元素

<div class="container"></div>

html,
body {
  height: 100%;
  margin: 0;
}
body {
  min-height: 100%;
  overflow: hidden;
}
.container {
  height: 100%;
  width: 50%;
  /* your width here */
  margin: auto;
  border: 1px solid green;
  position: relative;
}
.container::before,
.container::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50vw;
  z-index: -1;
}
.container::before {
  /* rightside */
  background: #f00; /* use bg image here */
  left: 50%;
}
.container::after {
  /* leftside */
  background: #0f0; /* use bg image here */
  right: 50%;
}

Answer 2

试试这个：

#wd-bg-right {
width:50vw;
Height: 100vh; /* just for demonstrating*/
Background-color: red;
Right: 0;
}

WD

-bg-right {

width:50vw;
Height: 100vh; /* just for demonstrating*/
Background-color: red;
Right: 0;
}

希望它可以帮助你，欢呼！