Javascript 有没有办法制作一个包含3个透明盒子的实心div？

我在这里看到了div中一个透明框的编码，
但不是多重的，我很难让任何东西正常工作
我有一个outter div，里面有3个盒子，从左到中，从右到中，有一个边框
我希望这3个盒子是透明的，不透明度为0.3，一直到主背景
不使用

FlexBox

或

JavaScript

，我使用的简单编码是否可以实现这一点
如何使主div为实心，其中包含3个透明框
这是我的编码和一张图片

正文{
背景图像：url（“http://lorempixel.com/500/800/nature/3");
背景色：#ffffff；
背景位置：上中；
背景重复：无重复；
背景尺寸：封面；
高度：600px；
宽度：100%；
字体大小：20px；
边际：0px；
填充：0px；
背景附件：固定；
z指数：9999px；
}
主要{
背景#336699；
宽度：90%；
高度：600px；
保证金：300px 0px 0px 100px；
填充：10px；
z指数：1；
}
.divl{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
浮动：左；
文本对齐：居中；
宽度：20%；
身高：100%；
边际：0px；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
divr先生{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
浮动：对；
文本对齐：居中；
宽度：20%；
身高：100%；
边际：0px；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
.分区{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
文本对齐：居中；
文本对齐：居中；
宽度：50%；
垂直对齐：中间对齐；
身高：100%；
保证金：自动；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
文本对齐：居中；
宽度：20%；
身高：100%；
边际：0px；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
divr先生{
背景：透明；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
浮动：对；
文本对齐：居中；
宽度：20%；
身高：100%；
边际：0px；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
.分区{
背景：透明；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
文本对齐：居中；
文本对齐：居中；
宽度：50%；
垂直对齐：中间对齐；
身高：100%；
保证金：自动；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}

左
使此框透明。。
右
使此框透明。。
居中
使此框透明。。

您的主html标记具有指定的纯色，因此您的三个div是透明的，但包含它们的“main”不是。您需要将透明度指定给主或删除实心背景

main {
    /*background: #336699; remove this to see the background image */
    background: #33669947; /*optionally use hex to add transparency*/
    width:90%;
    height:600px;
    margin: 300px 0px 0px 100px;
    padding: 10px;
    z-index: 1;
   }

---

您的主html标记具有指定的纯色，因此您的三个div是透明的，但包含它们的“main”不是。您需要将透明度指定给主或删除实心背景

main {
    /*background: #336699; remove this to see the background image */
    background: #33669947; /*optionally use hex to add transparency*/
    width:90%;
    height:600px;
    margin: 300px 0px 0px 100px;
    padding: 10px;
    z-index: 1;
   }

---

希望这就是你需要的。指定“背景附着：固定”时，它相对于窗口而不是父块

正文{
背景图像：url（“http://lorempixel.com/500/800/nature/3");
背景色：#ffffff；
背景位置：上中；
背景重复：无重复；
背景尺寸：封面；
高度：600px；
宽度：100%；
字体大小：20px；
边际：0px；
填充：0px；
背景附件：固定；
z指数：9999px；
}
主要{
背景#336699；
宽度：90%；
高度：600px；
保证金：300px 0px 0px 100px；
填充：10px；
z指数：1；
}
.divl{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
浮动：左；
文本对齐：居中；
宽度：20%；
身高：100%；
边际：0px；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
divr先生{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
浮动：对；
文本对齐：居中；
宽度：20%；
身高：100%；
边际：0px；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}
.分区{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*适用于IE8及更早版本*/
文本对齐：居中；
文本对齐：居中；
宽度：50%；
垂直对齐：中间对齐；
身高：100%；
保证金：自动；
填充：0px；
边框：2件纯黑；
边界半径：5px；
}

左
使此框透明。。
右
使此框透明。。
居中
使此框透明。。

希望这就是你需要的。指定“背景附着：固定”时，它相对于窗口而不是父块

正文{
背景图像：url（“http://lorempixel.com/500/800/nature/3");
背景色：#ffffff；
背景位置：上中；
背景重复：无重复；
背景尺寸：封面；
高度：600px；
宽度：100%；
字体大小：20px；
边际：0px；
填充：0px；
背景附件：固定；
z指数：9999px；
}
主要{
背景#336699；
宽度：90%；
高度：600px；
保证金：300px 0px 0px 100px；
填充：10px；
z指数：1；
}
.divl{
背景：url（“http://lorempixel.com/500/800/nature/3）上止点不重复，rgba（0,0,0,3）；
背景附件：固定；
背景尺寸：封面；
不透明度：0.3；
过滤器：alpha（不透明度=30）；/*用于IE8