我在此处看到了在 div 中为一个透明框编写的代码，
但不是多个，我在让任何事情正常工作时遇到问题..
我有一个 outter div，里面有 3 个盒子，左边、中间和右边有一个边框。
我希望这 3 个框一直透明到主背景，不透明度为 0.3。
是否可以通过我使用的简单编码来完成此操作，而无需 FlexBox 或 JavaScript？
我怎样才能使主 div 中包含 3 个透明框？
这是我的编码和图像..
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: transparent;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: transparent;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>
<div class="divl">Left <br> Make This Box Transparent..</div>
<div class="divr">Right <br> Make This Box Transparent..</div>
<div class="divc">Center <br> Make This Box Transparent..</div>
</main>
<div style="clear:both;"></div>
</body>
</html> 
最佳答案
希望这就是您所需要的。当您指定 background-attachment: fixed 时，它相对于窗口而不是父 block 。
body {
background-image: url("http://lorempixel.com/500/800/nature/3");
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height:600px;
width: 100%;
font-size: 20px;
margin: 0px;
padding: 0px;
background-attachment:fixed;
z-index: 9999px;
}
main {
background: #336699;
width:90%;
height:600px;
margin: 300px 0px 0px 100px;
padding: 10px;
z-index: 1;
}
.divl {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:left;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divr {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
float:right;
text-align:center;
width: 20%;
height: 100%;
margin:0px;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}
.divc {
background: url("http://lorempixel.com/500/800/nature/3") top center no-repeat, rgba(0,0,0,.3);
background-attachment: fixed;
background-size: cover;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
text-align:center;
text-align:center;
width: 50%;
vertical-align: middle;
height: 100%;
margin:auto;
padding: 0px;
border: 2px solid black;
border-radius: 5px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>
<div class="divl">Left <br> Make This Box Transparent..</div>
<div class="divr">Right <br> Make This Box Transparent..</div>
<div class="divc">Center <br> Make This Box Transparent..</div>
</main>
<div style="clear:both;"></div>
</body>
</html>关于javascript - 有没有办法制作一个带有 3 个透明框的实心 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54771091/