html - 如何使div的透明部分

Question

我试图使 div 的一部分透明，以便透明部分可以显示背景图案(用 css 制作的复杂图案)。所以我有一个 view_main div 和 2 个其他小 div，它们将是透明的并显示背景

#View_main{
 margin-left:7%;
 top: 15%;
 height:100%;
 width:70%;
 background-color:white;
 position:relative;
 border:0;
 z-index:1;
}

left_space div

#left_space{
 height:12%;
 width:12%;
 background-color:transparent;
 margin: auto;
 position: absolute;
 top: 0; left: -100%; bottom: 0; right: 0;
}

right_space div

#right_space{
 height:12%;
 width:12%;
 background-color:red;
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: -100%;
}

我已经尝试用 z-index=2 和 view_main z-index=1 来创建 left_space，但仍然没有， Here is a simple example ，我试图从 left_space div 显示背景(在这种情况下是绿色，但在我的代码中是图案或图像)我也试过不透明度但仍然没有! 有人知道吗？

这是一个视觉呈现

Answer 1

这是使用 before 和 after 伪类创建蓝色形状的代码

body {
  background-color: green;
}

.container {
  margin: 50px auto;
  height: 300px;
  width: 210px;
  background-color: blue;
  position: relative;
}
.container:before, .container:after {
  content: "";
  height: 44%;
  position: absolute;
  background-color: blue;
  z-index: -1;
  width: 112%;
  left: -6%;
}
.container:before {
  top: 0;
}
.container:after {
  bottom: 0;
}

DEMO